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

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

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

重要提示：任何其他对象（例如文本，行等）的大小和位置也会减少。所以要小心。

Answer 2

我不完全了解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;
}

Answer 3

将选项传递给html2canvas：

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

对我来说，选项scale适用于调整大小。您可以检索默认页面尺寸listed in the source，以计算所需的缩放比例。

在使用jspdf .html（）方法导出为pdf之前，先调整html的大小

3 个答案: