html2Canvas 图片不打印的问题

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

我这个问题比较奇葩,我是打印的一小块类容,而不是整个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 });
	},
};

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值