Html2Canvas 呈现完整的 div 内容答案

【问题标题】：Html2Canvas render full div contentHtml2Canvas 呈现完整的 div 内容
【发布时间】：2019-05-28 08:28:19
【问题描述】：

我正在尝试使用 html2canvas 将 div 的内容打印为 pdf：

<div #printSection>
  some content
</div>

我有一个用于此目的的函数：

public print(el: ElementRef, name: string, orientation: string = 'l') {
    const doc = new jsPDF(orientation, 'px', 'a4');
    html2Canvas(el.nativeElement).then(
      (canvas) => {
        const img = canvas.toDataURL('image/png');
        const ratio = canvas.height / canvas.width;
        const w = doc.internal.pageSize.width;
        const h = w * ratio;
        doc.addImage(img, 'JPEG', 0, 10, w, h);
        doc.save(name);
      }
    );
  }

我将元素 ref 作为参数传递，并将其内容导出为 pdf。问题是：只要我使用大屏幕，它就可以正常工作，当我的屏幕变小并且 div 没有作为一个整体呈现但它的侧面有滚动条时，此功能不会打印整个 div 内容，但它仅限于可见部分。

是否有解决此问题的方法。我需要这个打印独立于它启动的屏幕，因为这个应用程序也可以在平板电脑上运行。

感谢您的建议。

【问题讨论】：

标签： angular pdf html2canvas

【解决方案1】：

html2pdf 可能会解决您的问题。它建立在 jsPDF 和 html2canvas 之上。 https://github.com/eKoopmans/html2pdf.js 试试看吧。

【讨论】：