jquery 使用JavaScript生成高质量PDF(jspdf+html2canvas)

5sxhfpxr  于 2024-01-07  发布在  jQuery
关注(0)|答案(1)|浏览(177)

我一直在尝试转换和生成PDF从HTML页面上的一个按钮,自动生成和强制下载PDF的页面使用两个流行的插件 * JSPDF * HTML2Canvas到目前为止一切正常,但生成的PDF总是模糊,导入js文件后质量不高(jquery,html2canvas,jSPDF).

  1. function CreatePDFfromHTML() {
  2. var HTML_Width = $(".html-content").width();
  3. var HTML_Height = $(".html-content").height();
  4. var top_left_margin = 15;
  5. var PDF_Width = HTML_Width + (top_left_margin * 2);
  6. var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
  7. var canvas_image_width = HTML_Width;
  8. var canvas_image_height = HTML_Height;
  9. var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
  10. html2canvas($(".html-content")[0]).then(function (canvas) {
  11. var imgData = canvas.toDataURL("image/jpeg", 1.0);
  12. var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
  13. pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
  14. for (var i = 1; i <= totalPDFPages; i++) {
  15. pdf.addPage(PDF_Width, PDF_Height);
  16. pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
  17. }
  18. pdf.save("invoice_<?php echo $trackingNumber ;?>.pdf");
  19. $(".html-content").hide();
  20. });
  21. }

字符串
如何调整代码使html2canvas将页面转换为质量更好的图像(摆脱模糊,使生成的PDF文件更好)

wgxvkvu9

wgxvkvu91#

经过几天的搜索,我终于找到了一种方法,通过将HTML_WidthHTML_height乘以因子3来提高质量。下面是新代码:

  1. function CreatePDFfromHTML() {
  2. var HTML_Width = $(".html-content").width()*3;
  3. var HTML_Height = $(".html-content").height()*3;
  4. var top_left_margin = 15;
  5. var PDF_Width = HTML_Width + (top_left_margin * 2);
  6. var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
  7. var canvas_image_width = HTML_Width;
  8. var canvas_image_height = HTML_Height;
  9. var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
  10. html2canvas($(".html-content")[0]).then(function (canvas) {
  11. var imgData = canvas.toDataURL("image/jpeg", 1.0);
  12. var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
  13. pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
  14. for (var i = 1; i <= totalPDFPages; i++) {
  15. pdf.addPage(PDF_Width, PDF_Height);
  16. pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
  17. }
  18. pdf.save("invoice_<?php echo $trackingNumber ;?>.pdf");
  19. $(".html-content").hide();
  20. });
  21. }

字符串

展开查看全部

相关问题