本文实例为大家分享了vue导出页面为pdf格式的具体代码,供大家参考,具体内容如下
导出为图片
1.将页面html转换成图片
npm install html2canvas --save
2.在需要导出的页面引入
import html2canvas from 'html2canvas';
在 methods 中添加方法
dataurltoblob(dataurl) {//ie 图片转格式
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new uint8array(n);
while (n--) {
u8arr[n] = bstr.charcodeat(n);
}
return new blob([u8arr], {type: mime})
},
downloadresult(name) {
let canvasid = document.body
let a = document.createelement('a');
html2canvas(canvasid).then(canvas => {
let dom = document.body.appendchild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removechild(dom);
let blob = this.dataurltoblob(dom.todataurl("image/png"));
a.setattribute("href", url.createobjecturl(blob));
a.setattribute("download", name + ".png")
document.body.appendchild(a);
a.click();
url.revokeobjecturl(blob);
document.body.removechild(a);
});
},
printout(name) {
// 个人观察只是截取可见范围以及以下的区域,所以先将滚动条置顶
$(window).scrolltop(0); // jquery 的方法
document.body.scrolltop = 0; // ie的
document.documentelement.scrolltop = 0; // 其他
this.downloadresult(name)
},
导出为pdf
1.将页面html转换成图片
npm install html2canvas --save
2.将图片生成pdf
npm install jspdf --save
3.在需要导出的页面引入
import html2canvas from 'html2canvas';
import jspdf from 'jspdf'
在 methods 中添加方法
printout(name) {
let sharecontent = document.body,//需要截图的包裹的(原生的)dom 对象
width = sharecontent.clientwidth, //获取dom 宽度
height = sharecontent.clientheight, //获取dom 高度
canvas = document.createelement("canvas"), //创建一个canvas节点
scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = sharecontent.clientwidth * scale + "px";
canvas.style.height = sharecontent.clientheight * scale + "px";
canvas.getcontext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关,便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
usecors: true, // 【重要】开启跨域配置
};
html2canvas(sharecontent, opts).then(() => {
var contentwidth = canvas.width;
var contentheight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageheight = (contentwidth / 592.28) * 841.89;
//未生成pdf的html页面高度
var leftheight = contentheight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgwidth = 595.28;
var imgheight = (592.28 / contentwidth) * contentheight;
var pagedata = canvas.todataurl("image/jpeg", 1.0);
var pdf = new jspdf("", "pt", "a4");
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();
}
}
}
pdf.save(name + ".pdf"); // 这里是导出的文件名
});
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
希望与广大网友互动??
点此进行留言吧!