在使用 jspdf .html() 方法导出为 pdf 之前调整大小 html

Question

我正在尝试弄清楚如何使用 jsPDF .html() 方法调整 HTML 元素的大小。

我尝试使用下面的代码，但 width 选项似乎没有对输出进行任何更改。

我只是假设 width 是 .html() 的一个选项，不幸的是，截至目前，没有关于此方法的文档，人们应该猜到它 from the code.

此外，在我看来它应该采用 html2canvas options 的选项，这就是我尝试使用 width.

的原因

无论如何，代码：

var legend = document.getElementById("my-table");
var pdf = new jsPDF(orientation, undefined, format);
pdf.html(legend, {
    width: 200,
    callback: function () {
        window.open(pdf.output('bloburl'));
     }
});

#my-table

<table>
    <tr>
        <td><img src="image1.jpeg"></td>
    </tr>
    <tr>
        <td><img src="image2.jpeg"></td>
    </tr>
    ...
</table>

Answer 1

我不太清楚 jspdf 是什么，但你好像没拼对

var legend = document.getElementsById("my-table");

在这里。

var legend = document.getElementById("my-table");

也许，您可以通过 css 或样式属性调整这些表格的大小。

<table style="width:200;">
    <tr>
        <td><img src="image1.jpeg"></td>
    </tr>
    <tr>
        <td><img src="image2.jpeg"></td>
    </tr>
    ...
</table>

使用css

#my-table {
 width:200;
}

Answer 2

将选项传递给 html2canvas：

pdf.html(legend, {
    html2canvas: {
        // insert html2canvas options here, e.g.
        width: 200
    },
    callback: function () {
        // ...
    }
});

对我来说，选项 scale 可以很好地调整大小。您可以检索默认页面尺寸 listed in the source 以计算所需的比例因子。

Answer 3

我没有找到调整 HTML 对象大小的方法。相反，您可以将测量单位从 mm（默认）更改为 pt。这会将所有尺寸减小到原始尺寸的 1/3 左右。例如：

doc = new jsPDF('portrait', 'pt', 'a4');

重要提示：任何其他对象（即文本、线条等）的大小和位置也会缩小。所以要小心。

在使用 jspdf .html() 方法导出为 pdf 之前调整大小 html

Resize html before exporting to pdf with jspdf .html() method

html

javascript

pdf

html2canvas

jspdf