vue将html页面生成高清晰pdf文件的方法
更新时间:2022年03月03日 11:52:35 作者:没用的a吉
最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下
需要借助html2canvas和jspdf这两个插件
首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf
效果图如下

createImage(){//生成图片->pdf
let _this = this;
//----此处是解决页面带滚动条的时候截图不全问题
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;'
//----------------------------------------
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
let _articleHtml = document.getElementById('imageTofile');
let _w = _articleHtml.clientWidth;
let _h = _articleHtml.clientHeight;
//-----这里解决生成的pdf不清晰的问题 先放大3倍----后面再缩小3倍
let scale = 3;
canvas.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+;
_this.createPdfAll(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 = canvas.toDataURL('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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
这篇文章主要介绍了详解使用VUE搭建后台管理系统(vue-cli更新至3.0),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vue-next/runtime-core 源码阅读指南详解
这篇文章主要介绍了vue-next/runtime-core 源码阅读指南详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue watch中如何获取this.$refs.xxx节点
这篇文章主要介绍了vue watch中获取this.$refs.xxx节点的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08


最新评论