jsPDF将所有唯一的屏幕快照输出为帧,而不是打印全部内容

时间:2018-08-30 09:46:56

标签: javascript angular npm jspdf

我已经使用jsPDF npm模块在我的角度应用程序中将HTML转换为pdf。但我注意到,将网站页面打印为PDF仅截取了Firefox和Chrome浏览器中可见区域以及Internet Explorer中的可见屏幕截图。但是我想将整个网页转换为PDF。

我已经完成了以下工作:

HTML代码:

<div id="elemetToPrint">
   <!-- lengthy Code here (which is scrollable and contains graph as well)-->
<button class="printBtn" (click)="downloadPDF()">print</button>
</div>

打字稿代码如下:

const doc = new jsPDF({});
const elementToPrint = document.getElementById('elemetToPrint');
doc.addHTML(elementToPrint, () => {
  doc.autoPrint();
  doc.save('Test.pdf');
});

请让我知道是否有人可以解决。

您可以找到更多参考文献here

预先感谢您:)

1 个答案:

答案 0 :(得分:1)

看看html2canvas。这将为您的html拍照,然后使用jsPDF使用html2canvas中的图片创建pdf。该工具与jsPDF紧密结合。

https://html2canvas.hertzen.com/

以英语输入

 html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)
  });

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

教程 http://www.shanegibney.com/shanegibney/angular2-and-jspdf-file-generation/