当前位置: 代码迷 >> JavaScript >> 在使用 jspdf .html() 方法导出为 pdf 之前调整 html 的大小
  详细解决方案

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

热度:31   发布时间:2023-06-03 18:11:16.0

我想弄清楚如何使用 jsPDF 方法调整 HTML 元素的大小。

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

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

另外,在我看来,它应该从中,这就是我尝试使用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'));
     }
});

#我的桌子

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

将选项传递给 html2canvas:

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

对我来说,选项scale可以很好地调整大小。 您可以检索的默认页面尺寸以计算所需的缩放系数。

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

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

重要提示:任何其他对象(即文本、线条等)的大小和位置也会减小。 所以要小心。

我不完全了解 jspdf 是什么,但您似乎错过了拼写

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

这里。

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

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

<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;
}
  相关解决方案