Angular 2-如何将html导出为pdf？

Question

如何在我的angular2项目中创建一个下载按钮以将HTML div内容另存为PDF文件？

这是HTML内容

<div id="obrz">
  <br><br>
  <p class="float-right font-weight-bold">??????? ???</p>
  <br>
  <p class="float-left font-weight-bold">?????? ? ?????????:</p>

  <br>

  <div class="row" style="width:100%">
    <div class="col-md-2"><p>??????? ????????:</p></div>
    <div class="col-md-10"><input value="{{userModel.imeIprezime}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>???:</p></div>
    <div class="col-md-10"><input value="{{userModel.PIB}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>??????:</p></div>
    <div class="col-md-10"><input value="{{userModel.ulica + ' ' + userModel.broj + ' ' + userModel.grad}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>???????:</p></div>
    <div class="col-md-10"><input value="{{userModel.opstina}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
  </div>
  <br>
  </div>

PS我尝试了这个 jsPDF示例，但是对我来说根本不起作用

提前致谢

Answer 1

尝试这样的事情：

在div外部创建一个按钮

<button (click)="downloadPdf()">Download PDF</button>

单击后，它将在您的组件中调用此函数：

downloadPdf() {
    let doc = new jsPDF();
    doc.addHTML(document.getElementById("obrz"), function() {
       doc.save("obrz.pdf");
    });
}