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(...) 文檔