vue将html页⾯⽣成⾼清晰pdf⽂件的⽅法
⽬录
效果图如下
流⽂件转成file
总结
需要借助html2canvas和jspdf这两个插件
⾸先是将页⾯⽤html2canvas⽣成base64的图⽚，再⽤jspdf将图⽚插⼊到pdf
效果图如下
createImage(){//⽣成图⽚->pdf
let _this = this;
//----此处是解决页⾯带滚动条的时候截图不全问题
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;'
//----------------------------------------
let canvas = ateElement("canvas");
let context = Context("2d");
let _articleHtml = ElementById('imageTofile');
let _w = _articleHtml.clientWidth;
let _h = _articleHtml.clientHeight;
//-----这⾥解决⽣成的pdf不清晰的问题先放⼤3倍----后⾯再缩⼩3倍
let scale = 3;
pdf转htmlcanvas.width = _w * scale;
canvas.height = _h * scale;
context.scale(scale, scale);
let opts = {
scale: 1,
width: _w,
height: _h,
canvas: canvas,
useCORS: true
};
(window.html2canvas || html2canvas)(_articleHtml, opts).then(canvas => {//IOS13.4⽆效解决和{(intermediate value)(intermediate value)} is not a function+; _atePdfAll(canvas, scale);
});
},
我这⾥直接将整个的img插⼊到pdf，并未截断分页，因为截断的话需要调整，不太友好，不然会把⽂字从中间位置截断
createPdfAll (canvas, scale) {//⽣成图⽚->pdf
//-----------宽⾼缩⼩3倍---------------------
let contentWidth = canvas.width / scale
let contentHeight = canvas.height / scale
//--------------------
let pdf = new jsPDF('', 'pt', [contentWidth, contentHeight+50]) //此处加50是pdf最后离底部的空⽩距离。根据需要⾃⾏调节
let pageData = DataURL('image/jpeg', 1.0);
//这⾥只⽣成了⼀页的pdf，并未截断，需要截断的话在此处操作
pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
//这⾥是将pdf的流⽂件---》file⽂件
let filename = 'question.pdf' ;
let datauri = pdf.output('dataurlstring');
let file = this.dataURLtoFile(datauri,filename);
// 以⽂件的形式上传给服务器
this.uploadImg(file)
},
流⽂件转成file
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){undefined
u8arr[n] = bstr.charCodeAt(n);
}
//转换成file对象
return new File([u8arr], filename, {type:mime});
//转换成成blob对象
/
/return new Blob([u8arr],{type:mime});
},
种⽅案纯前端实现，⽆需后端配合，并且页⾯还原度⽐较⾼，对于pdf操作要求不⾼的需求，还是⽐较合适的解决⽅案。
缺点就是⽆法复制，对pdf操作不⼤兼容
总结
到此这篇关于vue将html页⾯⽣成⾼清晰pdf⽂件的⽂章就介绍到这了，更多相关vue将html页⾯⽣成pdf⽂件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
发布评论