当我使用 jsPDF 将 html 转换为 pdf 时丢失内容

Question

在我的 React 应用程序（客户端）中，我有一个按钮可以使用当前 html 内容和 jsPDF 创建 pdf。我正在使用 .html() 而不是 .fromHTML() 因为我需要保留 html 样式在pdf转换中。 真正的问题是当我使用html()时我丢失了很多row/col结构的内容页。所以，我需要将我的 html 内容缩放到 pdf 中，但我不知道该怎么做。

我的代码：

let doc = new jsPDF('p', 'pt', 'a4')
    let source = document.getElementById('pdfContent')

    doc.html( source, {
        callback: function (doc) {
            doc.save();
        }
     });

Answer 1

"lost a lot of content" 如果您的意思是您的内容无法放入 a4 页面，那么您可以放大页面，例如使用 a3 而不是 a4，或者您可以使用 [=11= 缩小内容] 在 html2canvas。可以根据您的页面格式和元素大小计算比例。

let doc = new jsPDF('p', 'pt', 'a4')

doc.html(document.getElementById('pdfContent'), {
    html2canvas: {
        scale: [yourScaleHere],
    },
    x: [margin],
    y: [margin],
    callback: function (doc) {
        window.open(doc.output('bloburl'));
    }
});

如果您不需要标准的页面大小，您可以根据您的内容设置页面。例如let pdf = new jsPDF('p', 'pt', [612, 1200]);

当我使用 jsPDF 将 html 转换为 pdf 时丢失内容

Losing content when i convert html to pdf with jsPDF

html

javascript

pdf

jspdf

reactjs