如何在angularjs中的特定div onclick按钮上创建Html到pdf？答案

【问题标题】：How to create Html to pdf on particular div onclick button in angularjs?如何在angularjs中的特定div onclick按钮上创建Html到pdf？
【发布时间】：2017-06-24 15:33:04
【问题描述】：

我是 AngularJS 的新手，我想通过单击按钮创建特定 div 的 pdf。目前我的代码适用于页面加载。如果我刷新页面，它将自动下载该特定的 div。但我需要在点击事件之后进行下载。这是我的代码。请帮我。我已经添加了 html2canvas 等必要的脚本。

html2canvas(document.getElementById('exportthis'), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500,
                }]
            };
            pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
        }
    });

【问题讨论】：

标签： angularjs pdf html2canvas

【解决方案1】：

你应该在你的控制器中创建一个函数，然后给一个按钮添加一个点击事件。

你的看法：

<input type="submit" ng-click="createPdf()" value="Create PDF"/>

你的控制器：

$scope.createPdf = function () {

    html2canvas(document.getElementById('exportthis'), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500,
                }]
            };
            pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
        }
    }); 
};

【讨论】：

【解决方案2】：

js点击事件

function myClick() {
  html2canvas(document.body, {
      onrendered: function(canvas) {
          document.body.appendChild(canvas);
      }
  });
}

html

<input type="submit" id="testhtm2canvas" onclick="myClick()" value="html2"/>

【讨论】：