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”。有什么建议吗？

- DeooK

Answer 1

这并不是一项简单的任务。在服务器端，我尝试使用wkhtmltopdf，但最终找到了更好的解决方案，因为使用它时无法充分利用CSS打印所有功能。我认为客户端工具如jsPDF也存在同样的问题，无法获得预期和一致的结果。

目前我选择使用Google Cloud中的无头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平板电脑上的操作方式，Safari for iOS可以导出为PDF。

- Vladimir Prudnikov

---

所有这些解决方案都不适用于我的应用程序。我不能假设用户会使用Chrome，当然我也不能安装任何其他应用程序，如wkhtmltopdf（甚至Chrome）。 - DeooK

转换必须在服务器上完成。您可以在服务器上使用无头Chrome https://cloud.google.com/blog/products/gcp/introducing-headless-chrome-support-in-cloud-functions-and-app-engine - Vladimir Prudnikov

在我的情况下，服务器上做这件事是没有意义的：我需要转换为PDF的是用户在搜索后得到的结果视图。顺便说一下，即使在服务器上我也不能安装任何东西。如果我找不到任何客户端的解决方案，可能我会直接在后端使用Java和iText来进行转换。 - DeooK

@DeooK，你太懒了，甚至连我建议你学习的东西都不想看，没有人会替你完成工作。我花了很多时间尝试解决这个任务。在客户端这样做会带来很多痛苦和不一致的结果。提示：通过使用无头浏览器，您可以将HTML或URL发送到搜索结果（与用户查看的相同结果）的Cloud Function中，从而为您创建PDF。https://medium.com/@ebidel/puppeteering-in-firebase-google-cloud-functions-76145c7662bd 和 https://medium.com/@ebidel/puppeteering-in-firebase-google-cloud-functions-76145c7662bd - Vladimir Prudnikov

是的，很棒，但是...我无法控制服务器安装。我无法使用云功能，也无法在服务器机器上安装任何东西。我必须将所有需要的内容放在Java应用程序或Angular应用程序上。 - DeooK

Answer 2

请使用这个方法 stackblitz 工作示例 在你的 TypeScript 文件中：

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>

- dasunse

---

无法正常工作...出现错误"ERROR TypeError: jspdf__WEBPACK_IMPORTED_MODULE_9__.jsPDF不是一个构造函数" - afsarkhan10182

@afsarkhan10182 请查看 stackblitx 示例。它是有效的。请参见 https://stackblitz.com/edit/angular-html-to-pdf-example - dasunse

@dasunse 你是否已经导入了html2canvas或任何其他脚本？请查看答案https://dev59.com/ea3la4cB1Zd3GeqPICit - afsarkhan10182

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>

- user11059168

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');
  });
}

- Bansi29

---

1. jspdf
2. 从 'html2canvas' 导入 h2c;
3. Highcharts

使用这个包。 - Bansi29