页面dom元素导出为pdf 内容黑屏问题
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");
})
})
}
试试这个呢
// 导出指定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')
})
}
}
}
1.先打印看下canvas 是否有内容
2.看下 pdf.addImage宽高xy是否是对的
好像要设置宽高比，和位置参数，之前用react写过一个html2canvas - jspdf 截取表格转pdf下载功能，你可以参考一下https://blog.csdn.net/weixin_42508580/article/details/111475051