如何使用angular2从模板文件显示PDF答案

【问题标题】：How to display PDF from the template file using angular2如何使用angular2从模板文件显示PDF
【发布时间】：2019-03-12 10:49:45
【问题描述】：

我有一个 pdf 按钮，当我单击该按钮时，我需要在新选项卡中打开 pdf 视图模式。谁能帮我解决这个问题。

DEMO

HTML：

  <button class="pull-right" (click)="generateToPdf()">PDF</button>
  <h2>Property Name</h2>
  <div class="col-xs-6">
  <div>
  <strong>Tenant:</strong> ABC Company
  </div>
  <div>
   <strong>Address:</strong> SRS Building, Banglore
  </div>
  <div>
  <strong>Suite:</strong> 100
  </div>
    </div>
<div class="col-xs-6">
  <div>
  <strong>Cap:</strong> 2%
  </div>
[DEMO][1]
    </div>

    </div>

TS：

 generateToPdf() {


    var doc = new jsPDF();

    doc.setFontSize(40);


    doc.addHTML(this.items.nativeElement, 0, 0, () => {
      doc.save("Invoice" + ".pdf");
    });
  }

这里 jspdf 没有安装，但它在 Visual Studio 中工作，但我在尝试使用它时遇到错误。

【问题讨论】：

确保您使用npm install --save jspdf 安装jspdf 我在您的packages.json 文件中看不到它。然后你还需要在你的 app.component 中取消注释 jspdf 的 import 语句。
是的，我试过了，它会抛出一个错误，说文件服务器包错误

标签： angular jspdf

【解决方案1】：

我在 index.html 中使用了 2 个脚本标签

<script src="https://unpkg.com/jspdf@1.3.3/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@2.3.1/dist/jspdf.plugin.autotable.js"></script>

这解决了我的问题。

【讨论】：