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>

<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>

P.S。我尝试了this jsPDF示例，但对我来说根本不起作用

预先感谢

Answer 1

尝试这样的事情：

在div之外创建一个按钮

0.0000000e+00
5.8778525e-01
9.5105652e-01
9.5105652e-01
5.8778525e-01
1.2246468e-16

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

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

Answer 2

JSPDF适用于angular2。您需要从dt〜下载定义。将库导入为：

import * as jsPDF from "jspdf";

let doc = new jsPDF();

// Add a title to your PDF
doc.setFontSize(30); 
doc.text(12, 10, "Your Title");

// Create your table here (The dynamic table needs to be converted to canvas).
let element = <HTMLScriptElement>document.getElementsByClassName("pvtTable") 
 [0];
html2canvas(element)
.then((canvas: any) => {
doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, 
doc.internal.pageSize.width, element.offsetHeight / 5 );
doc.save(`Report-${Date.now()}.pdf`);
})

在您的system.js中，在地图部分中添加以下行：

"jspdf": "<myLibs>/jspdf.js",

Answer 3

听觉是角度8的有效演示

Angular 8 Html To Pdf Demo code

对于Angular 2，您必须更改component.ts ViewChild代码段

@ViewChild('pdfTable', {static: false}) pdfTable: ElementRef;

为此

 @ViewChild('pdfTable') pdfTable: ElementRef;

希望这会有所帮助...！

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

3 个答案: