Javascript 在Angularjs中使用pdfMake从HTML生成PDF

我正在尝试使用

pdfMake

和

Angular

从我的HTML创建一个

PDF

（我也尝试了

jsPDF

，但也无法让它工作）。我尝试在角度控制器中使用以下代码：

var blob = new Blob([document.getElementById('exportable').innerHTML])
var docDefinition = {
    content: [blob]
}
pdfMake.createPdf(docDefinition).open();

但我收到以下错误：

无法识别的文档结构：{“\u margin:null}”

我的HTML由一个div

exportable

中的两个简单表组成

如果有人知道这个问题的解决方案，或者从Angular将HTML转换成PDF的其他方法，请提供帮助

---

非常感谢您的任何帮助！

好的，我知道了

您将需要和。您不需要在app.js中进行任何注入，只需包含在脚本标记中即可

在要创建PDF的div上，添加一个ID名称，如下所示：

 <div id="exportthis">

---

我希望这对其他人有所帮助。快乐编码！

我知道这与本文无关，但可能会帮助其他人在客户端将HTML转换为PDF。如果使用剑道，这是一个简单的解决方案。它还保留css（大多数情况下）

var generatePDF=function（）{
kendo.drawing.drawDOM（$（“#formConfirmation”））。然后（函数（组）{
kendo.drawing.pdf.saveAs（组，“转换后的pdf.pdf”）；
});
}

另存为PDF




主题示例
这是一个模板，展示了Bootstrap中包含的可选主题样式表。使用它作为起点，通过构建或修改它来创建更独特的内容

按钮

违约
主要的，重要的
成功
信息
警告
危险
链接


违约
主要的，重要的
成功
信息
警告
危险
链接


违约
主要的，重要的
成功
信息
警告
危险
链接


违约
主要的，重要的
成功
信息
警告
危险
链接

桌子
#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
#
名字
姓
用户名
1.
做记号
奥托
@mdo
做记号
奥托
@TwBootstrap
2.
雅各布
桑顿
@肥
3.
小鸟拉里
@推特
#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
小鸟拉里
@推特
缩略图
标签
违约
主要的，重要的
成功
信息
警告
危险
违约
主要的，重要的
成功
信息
警告
危险
违约
主要的，重要的
成功
信息
警告
危险
违约
主要的，重要的
成功
信息
警告
危险
违约
主要的，重要的
成功
信息
警告
危险
违约
主要的，重要的
成功
信息
警告
危险

违约
主要的，重要的
成功
信息
警告
危险

徽章










下拉菜单











       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");
            }
        });

var html2pdf = (function(html2canvas, jsPDF) {

declare function html2pdf(html2canvas, jsPDF): any;

generate_pdf(){
    this.someService.loadContent().subscribe(
      pdfContent => {
        html2pdf(pdfContent, {
          margin:       1,
          filename:     'myfile.pdf',
          image:        { type: 'jpeg', quality: 0.98 },
          html2canvas:  { dpi: 192, letterRendering: true },
          jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
        });
      }
    );
  }

   <div class="pdf-preview" ng-init="generatePDF(true)">
    <object data="{{c.content}}" type="application/pdf" style="width:58vh;height:88vh;" ng-if="c.content" ></object>
    <div ng-if="!c.content">
      <img src="https://support.lenovo.com/esv4/images/loading.gif" width="50" height="50">
    </div>
  </div>

$scope.generatePDF = function (preview) {
    docDefinition = {} //you rootine to generate pdf content
    //...
    if (preview) {
        pdfMake.createPdf(docDefinition).getDataUrl(function(dataURL) {
            c.content = dataURL;
        });
    }
}