时间戳

首页 > 解决方案 > 将包含图像的 HTML 渲染为 PDF Django

javascript - 将包含图像的 HTML 渲染为 PDF Django

问题描述

我有一个 django 应用程序，用户可以在其中打印一些包含图像的页面，作为数据处理的一部分。

我尝试了 jsPDF，但它没有渲染我的图像，最后我只得到了文本

$(document).ready(function() {
  $("#pdfDownloader").click(function() {

    var doc = new jsPDF('p', 'pt', 'a4', true);

    doc.fromHTML($('#renderMe').get(0), 15, 15, {
      'width': 500
    }, function (dispose) {
    doc.save('thisMotion.pdf');
    });
  });
})

这是我的代码，它没有渲染图像，所以我需要改变什么吗？

使用 Django 视图可以解决这个问题，是否有任何替代方法可以xhtml2pdf将我的 CSS 包含在 HTML 文件中？

标签： javascriptdjangopdfjspdf

解决方案

fromHTML用于从 HTML 中获取文本以形成 PDF。尝试改用 html2canvas js 库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

您可以使用如下代码创建画布图像并将其添加到 PDF 中，

$(document).ready(function() {
  $("#pdfDownloader").click(function() {

html2canvas($("#renderMe")).then(canvas => {  
      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('p', 'pt', 'a4', true); // A4 size page of PDF  
      var positionX = 0;  
      var positionY = 0;
      pdf.addImage(contentDataURL, 'PNG', positionY, positionY, undefined, undefined)  
      pdf.save('thisMotion.pdf'); // Generated PDF   
    });

});
})

这将为您提供一个 PDF，就像在屏幕上呈现的 HTML 一样。

推荐阅读