Angular 7：将 HTML 转换为 PDF

Question

我正在尝试将 HTML 表格转换为 PDF，但没有成功。

我使用 jsPDF 来做到这一点，但结果真的很差，我正试图了解原因。

考虑到我有一台平板电脑，我想要将此表格以横向模式打印在 A4 页面上（使用所有需要的页面）。我的问题是 PDF 由图像组成（我更喜欢文本），而且图像质量非常低。

我试过的是这样的：

const html = document.getElementById('resultTable');
const pdf = new jsPDF('landscape', 'px', 'a4');

pdf.addHTML(html, 0, 0, {
    'width': html.clientWidth,
    'height': html.clientHeight
}, () => { pdf.save('web.pdf'); });

我已经尝试使用 pdf 页面的大小（使用 pdf.internal.pageSize）作为宽度和高度，但没有成功。而且我已经尝试使用 'pt' 和 'mm' 而不是 'px'。

有什么想法吗？

Answer 1

这样使用stackblitz working example

在你的打字稿文件中

import {jsPDF} from 'jspdf';

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


public downloadPDF() {
   const doc = new jsPDF();

   const specialElementHandlers = {
      '#editor': function (element, renderer) {
       return true;
       }
   };

   const content = this.content.nativeElement;

   doc.fromHTML(content.innerHTML, 15, 15, {
      width: 190,
     'elementHandlers': specialElementHandlers
   });

   doc.save('test.pdf');
}

在你的 html 文件中

<div id="content" #content>
    <!-- Put your content here -->
</div>

<button (click)="downloadPDF()">Export To PDF</button>

Answer 2

这不是那么简单的任务。在服务器上，我尝试使用wkhtmltopdf，但最终寻找更好的解决方案，因为使用它我无法使用 CSS 的所有功能进行打印。我认为 jsPDF 等客户端工具也存在同样的问题，您不会得到预期的一致结果。

Google Cloud 中的 Headless chrome 是我现在的选择。

这里很好地概述了可用的工具和技术Modern HTML to PDF conversion

更新：

如果您需要创建 PDF 并且无法在您的服务器上安装任何东西，您可以使用 Headless Chrome 和 Google Cloud Function 来完成。

using-puppeteer-in-google-cloud-functions

puppeteering-in-firebase-google-cloud-functions

更新 2：

顺便说一句，您始终可以选择在浏览器中打印为 PDF。但是，我不确定它如何在 Android 平板电脑上运行，iOS 版 Safari 可以导出为 PDF。

Answer 3

改用.html()。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function convert() {
        let pdf = new jsPDF('l', 'pt', [tblWidth, tblHeight]);
        pdf.html(document.getElementById('resultTable'), {
            callback: function () {
                // pdf.save('web.pdf');
                window.open(pdf.output('bloburl')); // use this to debug
            }
        });
    }
</script>

Answer 4

public downloadPdf() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('printpdf')).then(function (canvas) {
  let width = doc.internal.pageSize.getWidth();
  let height = doc.internal.pageSize.getHeight();
  let dataURL = canvas.toDataURL('image/jpeg', 1.0);
  doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
  doc.save('mypdf.pdf');
  });
}