其中，文檔中還缺少dpi，dpi就是像素的意思，dpi的值越大，證明圖片約清晰，我這里選擇的是300

注意事項(xiàng)：界面隱藏、透明度為0都不能夠截圖成功

3、jspdf

文檔：https://www.freesion.com/article/97121153598/
https://parall.ax/products/jspdf
https://www.hangge.com/blog/cache/detail_2205.html

每個(gè)文檔介紹的不是很全面，所以，需要幾個(gè)文檔對比觀看下

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export const getPdf = (title) =>{

    return new Promise(resolve => {

        html2Canvas(document.queryselector('#resultsHuiZongTableId'), {

            allowTaint: false,

            useCORS: true, // allowTaint、useCORS只能夠出現(xiàn)一個(gè)

            imageTimeout: 0,

            dpi: 300,  // 像素

            scale: 4,  // 圖片大小

        }).then(function (canvas) {

            // document.body.appendChild(canvas)

            // 用于將canvas對象轉(zhuǎn)換為base64位編碼

            let pageData = canvas.toDataURL('image/jpeg', 1.0),

                canvasWidth = canvas.width,

                canvasHeight = canvas.height,

                concentWidth = 500,

                concentHeight = Math.round((concentWidth / canvasWidth) * canvasHeight),

                position = 72,

                pageHeight = 892,

                height = concentHeight

            console.log(height, pageHeight)

            // 新建一個(gè)new JsPDF，A3的像素大小 842*1191，A4的像素大小 592*841。這個(gè)px像素不準(zhǔn)確，不清楚他們的像素大小來源如何

            let PDF = new JsPDF('p', 'px', 'a3')

            if (height <= pageHeight) {

                // 添加圖片

                PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)

            } else {

                while (height > 0) {

                    PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)

                    height -= pageHeight

                    position -= pageHeight

                    if (height > 0) {

                        PDF.addPage()

                    }

                }

            }

            // 保存 pdf 文檔

            PDF.save(`${title}.pdf`)

            resolve(true)

        })

    })

}