AngularJS使用pdfMake时出现‘html2canvas is not defined’错误求助

这问题我之前在项目里也踩过坑，咱们一步步来排查解决：

• 首先确认你有没有引入html2canvas脚本
  你提到已经引入了pdfmake.min.js，但html2canvas是完全独立的第三方库，和pdfmake没有依赖关联，所以必须单独引入它的脚本文件。比如在你的HTML页面中添加：

  <script src="path/to/html2canvas.min.js"></script>
  

  要注意路径是否正确，可以打开浏览器开发者工具（F12）切换到Network标签，刷新页面看看这个脚本有没有出现404加载失败的情况。

• 检查脚本加载顺序
  脚本的加载顺序至关重要：必须先加载html2canvas，再加载包含你的$scope.export函数的业务脚本，最后加载pdfmake（pdfmake的顺序在这里影响不大，但html2canvas一定要在你的业务代码之前）。如果顺序反了，当你的代码执行时，html2canvas还未完成加载，自然会提示“未定义”。

• 尝试用window.html2canvas访问全局对象
  有时候AngularJS的作用域可能会限制对全局变量的直接访问，你可以修改export函数，明确使用window前缀调用html2canvas，确保能拿到全局的库对象：

  $scope.export = function() {
    window.html2canvas(document.getElementById('balanceSheet'), {
      onrendered: function(canvas) {
        var data = canvas.toDataURL();
        var docDefinition = {
          content: [{
            image: data,
            width: 500,
          }]
        };
        pdfMake.createPdf(docDefinition).download("test.pdf");
      }
    });
  }
  

• 先做个简单测试排除Angular作用域问题
  你可以在页面里写一个普通按钮，直接调用html2canvas而不通过Angular的$scope，比如：

  <button onclick="testHtml2canvas()">测试html2canvas</button>
  <script>
    function testHtml2canvas() {
      html2canvas(document.getElementById('balanceSheet')).then(canvas => {
        console.log('canvas生成成功', canvas);
      });
    }
  </script>
  

  如果这个测试能正常运行，说明问题出在Angular作用域对全局变量的访问限制上，用上面的window.html2canvas方法就能解决；如果测试也报错，那肯定是脚本引入或加载顺序的问题，再回头检查路径和加载顺序即可。

内容的提问来源于stack exchange，提问作者Mark