html2canvas， jsPDF - 如何缩放/调整"legal letter" PDF页面的页面大小？

Question

我通过使用整个document.body创建PDF，将其变成画布并将其传递给jsPDF。但是图像/画布太宽了。我想为页面缩放它，但jsPDF没有像素大小作为测量。

选项为:pt、mm、cm。我该怎么调整尺寸呢?如果需要，我如何缩放我的图像?

我应该使用addImage函数缩放，或使用画布缩放。getContect("2d")和绘图到一个新的画布?

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(…)文档