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

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

我现在选择Google Cloud中的无头铬。

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

更新：如果您需要创建PDF而不能在服务器上安装任何东西，则可以使用Headless Chrome和Google Cloud Function来完成。

https://rominirani.com/using-puppeteer-in-google-cloud-functions-809a14856e14 https://medium.com/@ebidel/puppeteering-in-firebase-google-cloud-functions-76145c7662bd

更新2：顺便说一下，您始终可以选择在浏览器中打印为PDF。但是，我不确定它在Android平板电脑上如何工作，iOS的Safari是否可以导出为PDF。

Answer 2

使用这种方式custom Check implemenation

在您的打字稿文件中

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

Angular 7：将HTML转换为PDF

4 个答案: