页面dom元素导出为pdf 内容黑屏问题

Question

html2Canvas + pdfjs 将页面dom元素导出为pdf
当页面元素很少时，页面可以正常导出，但页面内容过多时，导出的pdf全部变成黑色内容

function uploadPdf($vue, domName){
    document.documentElement.scrollTop = 0;
    document.documentElement.scrollLeft = 0;
    document.body.scrollTop = 0;
    document.body.scrollLeft = 0;
    let imageWrapper = document.querySelector("#"+domName)
    $vue.$nextTick(() => {
        html2Canvas(imageWrapper, {
            allowTaint: true,
            x: imageWrapper.getBoundingClientRect().left - 180 ,    
            y:imageWrapper.getBoundingClientRect().top,
            width:imageWrapper.offsetWidth - 15,                  
            height:imageWrapper.offsetHeight,
            backgroundColor:"#FFF", 
            useCORS: true,
            scale:3,      
            dpi: 350, 
        }).then((canvas) => {
            let pdf = new JsPDF('p', 'mm', 'a4');   
            let ctx = canvas.getContext('2d'),
                a4w = 190, a4h = 277,    
                imgHeight = Math.floor(a4h * canvas.width / a4w),    
                renderedHeight = 0;
            while(renderedHeight < canvas.height) {
                let page = document.createElement("canvas");
                page.width = canvas.width;
                page.height = Math.min(imgHeight, canvas.height - renderedHeight);
                
                page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
                pdf.addImage(page.toDataURL('image/jpeg', 0.2), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));    
                renderedHeight += imgHeight;
                if(renderedHeight < canvas.height)
                    pdf.addPage();
                let uploadPdf =  pdf.output("datauristring") 
                let arr = uploadPdf.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let suffix = mime.split('/')[1]
                let bstr = window.atob(arr[1]) 
                let n = bstr.length
                let u8arr = new Uint8Array(n)
                let filename="temp_img";
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                let file = new File([u8arr], `${filename}.${suffix}`, {type: mime});
                let formdata = new FormData();
                formdata.append("uploadfile",file);
            }
            pdf.save("导出pdf");
        })
    })

}

Answer 1

试试这个呢
// 导出指定DOM为PDF
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function(selector, title) {
window.pageYoffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
var htmlDom = document.querySelector(selector)
html2Canvas(document.querySelector(selector), {
allowTaint: true,
taintTest: false,
useCORS: true,
width: htmlDom.clientWidth, // dom 原始宽度
height: htmlDom.clientHeight,
scrollY: 0,
scrollX: 20,
dpi: window.devicePixelRatio * 4,
scale: 4 // 按比例增加分辨率
}).then(function(canvas) {
const contentWidth = canvas.width
const contentHeight = canvas.height
const pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
const imgWidth = 595.28
const imgHeight = 592.28 / contentWidth * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
}
}
}