我这个问题比较奇葩,我是打印的一小块类容,而不是整个html,打印单里面,打印单里面的图片签字老是打印不出来。来一起把下面的源码改一下(问题解决)
这是html2Canvas 1.4.1版本的源码
(Jn(B) || r) && (t.crossOrigin = '*'),
(t.src = B + '?v=' + Math.random()),
注意:当然我们返回里的处理也别少(下面这代码忘记在哪个大佬那里拿的了,😓)
import html2Canvas141 from '@/assets/js/html2canvas1.4.1.min';
import JsPDF from 'jspdf';
export default {
install(Vue, options) {
/**
*
* @param {*} reportName 下载时候的标题
* @param {*} isDownload 是否下载默认为下载,传false不下载
*/
Vue.prototype.getPdf = (reportName, dom, isDownload = false) => {
return new Promise((resolve, reject) => {
const title = reportName;
html2Canvas141(dom, {
dpi: 144,
allowTaint: true,
useCORS: true,
}).then((canvas) => {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
canvas.setAttribute('crossOrigin', 'Anonymous');
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = (592.28 / contentWidth) * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const PDF = new JsPDF('', 'pt', 'a4');
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
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(); // 在这里插入代码片
}
}
}
if (isDownload) {
PDF.save(`${title}.pdf`);
}
// 删除本地存储的base64字段
const pdfData = PDF.output('datauristring'); // 获取base64Pdf
resolve(this.dataURLtoFile(pdfData, `${title}.pdf`));
});
});
};
},
// 将base64转换为文件,接收2个参数,第一是base64,第二个是文件名字最后返回文件对象
dataURLtoFile(dataurl, filename) {
const arr = dataurl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
// eslint-disable-next-line no-plusplus
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
},
};


这篇博客探讨了在使用html2canvas和jsPDF库将HTML内容转换为PDF时,遇到图片无法打印的问题。作者提供了修改html2canvas源码的解决方案,包括设置crossOrigin属性和调整图片尺寸,以确保图片能正确显示在生成的PDF中。同时,还分享了一个用于下载带有图片的PDF的Vue插件方法。

397

被折叠的 条评论
为什么被折叠?



