javascript 使用变量在JS中将HTML转换为PDF

6pp0gazn 于 2023-02-15 发布在 Java

关注(0)|答案(1)|浏览(98)

这是我的第一篇文章，因为我卡住了，我没有找到解决方案，无论是在这里或网络。
我想使用JS将HTML转换为PDF。我正在搜索，最好的选择似乎是HTML2canvas和JSpdf。但我的想法是我的HTML存储在一个变量中：

var test = '<html><head><script type="text/javscript">var number = 123;</script></head><body>
<h1>"the value for number is: " + number</h1></body></html>'

我的变量要复杂得多，它包含CSS和样式，但这只是为了了解这个概念，然后当我试图将它转换到画布，它没有转换。

const filename  = 'ThisIsYourPDFFilename.pdf';

html2canvas(test).then(canvas => {
    let pdf = new jsPDF('p', 'mm', 'a4');
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
    pdf.save(filename);
});

有人知道为什么会这样吗？也许这是一个很愚蠢的问题，但我不知道如何避免错误。
先谢谢你。

JavaScript

来源：https://stackoverflow.com/questions/62139091/html-to-pdf-in-js-using-a-variable

1条答案

按热度按时间

ws51t4hk1#

您使用string作为html2canvas的参数，但它采用HTML元素：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Look at their documentation
我修改了你的代码：

const html2canvas = require("html2canvas");
const jsPDF = require("jspdf");

html2canvas(document.getElementById("screenshot"), { scale: 1 }).then(
  (canvas) => {
    document.body.appendChild(canvas);
    const filename = "ThisIsYourPDFFilename.pdf";
    let pdf = new jsPDF("p", "mm", "a4");
    pdf.addImage(canvas.toDataURL("image/png"), "PNG", 0, 0);
    pdf.save(filename);
    document.body.removeChild(canvas);
  }
);

正文应包含ID为的元素屏幕截图：

<div id="screenshot">
    Content
</div>

- 更新**：

根据this resource，jsPDF具有方法fromHTML，因此可能不需要html2canvas

var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
    '#elementH': function (element, renderer) {
        return true;
    }
};
// note here that it uses html
doc.fromHTML(elementHTML, 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('sample-document.pdf');

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 使用变量在JS中将HTML转换为PDF

1条答案

相关问题

热门标签

最新问答