html2canvas, jsPDF - 如何缩放/调整“法律字母”PDF 页面的页面大小？

Question

我正在使用整个document.body创建 PDF ，将其转换为 canvas 并将其传递给jsPDF 。 但是图像/画布太宽了。 我想为页面缩放它，但jsPDF没有像素大小作为衡量标准。

选项有： pt 、 mm 、 cm 。 我该如何正确调整尺寸？ 如果需要，我如何缩放我的图像？

我应该使用addImage function 进行缩放，还是使用 canvas.getContect("2d") 并绘制到新的 canvas 进行缩放？

html2canvas(
    document.body,
    {
        //When the canvas is created, our callback
        onrendered: function(canvas)
        {         
            //Create jsPDF with what measurements?
            var doc = new jsPDF('p', 'pt');

            /*
             * Put image on page. Are these measurements
             * in pts? How does that compare to pixels?
             *
             * Is the x/y (the 10, 10) the x and y in the image?
             * Or in the page where the image is printed?
             * 
             * Should I be using this to scale, or scale by
             * using canvas.getContect( "2d" ) and drawing on
             * to a new canvas?
             */
            doc.addImage(canvas, 'PNG', 10, 10, 1024, 1000);

            //Save
            doc.save('sample-file.pdf');
    }
});

Answer 1

这需要更多的调整，但这是迄今为止最好的解决方案。 也许更多可以帮助使它变得完美。 此解决方案正在获取 ReactJS 应用程序的form元素。 它正在创建一个大型的 PDF。 需要 html2canvas windowWidth ，因为类似的 jsPDF 设置声明它不会影响媒体查询。

toPdf = (callback) => {
    const capture = document.querySelector('form')
    const pdf = jsPDF({orientation: 'p', format: 'letter'})

    pdf.html(capture, {
        callback: function (doc) {
            if (!callback) {
                return
            }

            callback(doc)
        },
        x: 0,
        y: 0,
        margin: [4, 4, 4, 4], // mm
        width: 208, // 216 = letter paper width in mm, 208 = less the 8mm margin
        windowWidth: 786,  // 816 = letter paper pixel width at 96dpi (web), 786 = less the 30px margin
        html2canvas: {
            logging: false,
            windowWidth: 786 // 816 = letter paper pixel width at 96dpi (web), 786 = less the 30px margin
        }
    })
}

jsPDF.html(...) 文档