vue点击按钮将dom转为pdf

30 篇文章 1 订阅
2 篇文章 0 订阅
//下载插件
npm install html2canvas
npm install jspdf
//建一个js文件htmlToPdf.js

***import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
function printOut(DomName, a) {
//title,随意设置,也可以提出来做参数,传入进来,自己发挥
var title = a;
var that = this;
var shareContent = DomName; //需要截图的包裹的(原生的)DOM 对象
//console.log.log(shareContent)
//打印看有没有获取到dom
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放,在此我是把canvas放大了2倍
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
html2Canvas(DomName, {
//允许跨域图片的加载
useCORS: true,
}).then(function (canvas) {
var context = canvas.getContext("2d");
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var imgData = canvas.toDataURL('image/', 1.0); //转化成base64格式,可上网了解此格式
var img = new Image();
img.src = imgData;
img.onload = function () {
img.width = img.width / 1; //因为在上面放大了2倍,生成image之后要/2
img.height = img.height / 1;
img.style.transform = "scale(0.5)";
if (this.width > this.height) {
//此可以根据打印的大小进行自动调节
var doc = new JsPDF("l", "mm", [
this.width * 0.555,
this.height * 0.555
]);
} else {
var doc = new JsPDF("p", "mm", [
this.width * 0.555,
this.height * 0.555
]);
}
doc.addImage(
imgData,
"jpeg",
10,
0,
this.width * 0.505,
this.height * 0.545
);
doc.save(title + "-文件.pdf");
//console.log.log("倒数3秒导出啦")
};
});
}
// //导出方法
export {
    printOut
}***
//以上代码放入js文件中
//引入文件 
import {printOut} from "./htmlToPdf";

//this.$refs.exportPdfs是要转为pdf的dom ,title是pdf标题
this.$nextTick(()=>{
  printOut(this.$refs.exportPdfs,this.title)
 })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值