1、首先来看下效果图
2、使用技术:html2Canvas、JsPDF插件,mode_modules下载两个插件
npm i html2Canvas JsPDF
其中,html2Canvas 负责把html转为图片,JsPDF负责把图片转为pdf文件
3、点击按钮触发打印事件
//点击按钮触发打印事件
button @click='htmlToPdf(节点ID',文件名')'>print<button>
//传入打印节点,文件名,然后调用打印事件
htmlToPdf(domName, title) {
this.downloadPDF(domName, title)
},
//主要代码
downloadPDF(domName, title) {
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// 水印
const can = this.waterMark()
const el = document.getElementById(domName);
return new Promise((resolve, reject) => {
const ele = document.getElementById(domName);
let eleW = ele.offsetWidth+20; // 获得该容器的宽
// let eleH = ele.offsetHeight // 获得该容器的高
let eleH = ele.offsetHeight; // 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
let scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
canvas.width = eleW * 2; // 将画布宽&&高放大两倍
canvas.height = eleH * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
// context.translate(-offsetLeft - abs, -offsetTop);
var opts = {
scale: 2,//解决pdf不清晰问题
// canvas: canvas,
width: eleW,
height: eleH,
// logging :true,
useCORS: true,
background: "#FFF",
allowTaint: false,
// dpi: 300,