项目场景：
vue项目运行在移动端（企业微信聊天栏工具、企业微信浏览器、微信浏览器、外部浏览器），PC端（微信浏览器、其他厂商浏览器），利用html2canvas将页面生成图片文件，并采用jspdf将生成的图片转为pdf，并可以保存到本地。
遇到的问题
1.页面有网络路径图片导致页面网络图片的位置是空白
解决方案：先克隆需要生成pdf的动，将网络图片地址转成base64。
2.jspdf插件生成pdf,并本地直接下载，移动端微信浏览器无反应
原因分析：本地直接下载方式，可能是微信浏览器可能对于本地生成的blob文件流下载，是限制的
解决方案：采用本地生成文件流转file利用后端上传文件服务器，后端返回文件静态路径，在利用a download 下载文件，测试后pc和移动端及微信浏览器都是好使的
实现代码
1.安装插件
npm install html2canvas@1.0.0-rc.4 jspdf --save
"dependencies": {
"html2canvas": "~1.0.0-rc.4", // 锁定版本， 高版本配置项的x和y有差异问题，导致生成图片位置有便宜
"jspdf": "^2.5.1",
}
2.插件引用
import html2canvas from 'html2canvas';
import jspdf from 'jspdf';
async generatePdf(){
let product_proposal = this.$refs.product_proposal;
let contentWidth = product_proposal.scrollWidth;
let contentHeight = product_proposal.scrollHeight; //btn按钮组 上面box 外边距重合
// 克隆dom 替换网络路径图片为base64
let new_product_proposal = await this.handleDom(product_proposal);
//将克隆dom 放置当前dom的下一层，放置操作克隆的dom时，页面有闪动
new_product_proposal.style.position = 'absolute'
new_product_proposal.style.top = '0'
new_product_proposal.style.zIndex = '-1'
//解决ios safari 页面高度大于4096 canvas最大支持4096
let x = 0, y=0;
if(contentHeight > 4095 && ((/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) || /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(navigator.userAgent))){
let scale = 4095 / contentHeight;
let newHeight = 4095;
let newWidth = scale * contentWidth
new_product_proposal.style.transform = `scale(${scale})`
x = (contentWidth - newWidth) / 2;
y = (contentHeight - newHeight) / 2;
contentWidth = newWidth;
contentHeight = newHeight;
}
document.querySelector('.proposal-wrap').appendChild(new_product_proposal);
new html2canvas(new_product_proposal,{
// scale: window.devicePixelRatio*2,
allowTaint: true,
useCORS: true ,
width: contentWidth,
height: contentHeight,
x: x,
y: y,
scrollY: 0,
scrollX: 0,
removeContainer: true
}).then((canvas)=>{
//重置页面
document.querySelector('.proposal-wrap').removeChild(new_product_proposal);
let pageData = canvas.toDataURL("image/jpeg", 1.0);
// l表示横版，p：纵向 （默认纵向）
var pdf = new jspdf('', 'mm', [contentWidth,contentHeight]);
pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);
let blob = pdf.output('blob');
// 上传当前模板id 分享pdf文件
const formData = new FormData()
let file = new File([blob],`${(new Date).getTime()}.pdf`)
formData.append('file', file)
formData.append('planId', planId)
//调用后端上传文件接口，返回文件静态地址
PDFUpload(formData).then(res=>{
if(res.data.data){
// 1.本地下载
let link = document.createElement("a");
link.href = res.data.data;
link.style.display = "none"; //a标签隐藏
link.download = `${this.planName}.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link)
}
Toast.clear();
}).catch(err=>{
console.log(err);
this.$toast('网络不佳，pdf生成失败，请稍后再试')
})
}).catch(err=>{
console.log(err);
this.$toast('pdf生成失败')
})
}
// 克隆dom 替换网络路径图片为base64
async handleDom(dom){
let newDom = dom.cloneNode(true);
//页面中的网络图片 配置class名为networkImg
let networkImgs = newDom.querySelectorAll('.networkImg');
for (let index = 0; index < networkImgs.length; index++) {
//替换dom中网络路径图片为base64
var srcBase64 = await this.imgToBase64(networkImgs[index].src)
networkImgs[index].src = srcBase64
}
return newDom;
},
//网络图片 转base64 （存在跨域的问题，需nginx配置代理）
async imgToBase64(val) {
if (!val) return;
var image = new Image();
//截取网络路径 接口部分，匹配代理，解决跨域问题
val = val.substr(val.indexOf("/img"), val.length);
val = val.replace("/img", "/image");
image.src = val + "?v=" + Math.random(); // 处理缓存
image.setAttribute("crossOrigin", "*");
var src = "";
var srcPromise = new Promise((resolve, reject) => {
image.onload = (e) => {
var canvas = document.createElement("canvas");
canvas.width = e.target.naturalWidth;
canvas.height = e.target.naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
resolve(dataURL);
};
});
await srcPromise.then((res) => {
src = res;
});
return src;
},
