深⼊浅出vuejspdf下载_vue通过插件实现PDF⽣成以及下载第⼀步: 安装插件
npm install --save html2canvas //将html转换成图⽚
npm install jspdf --save　//将图⽚⽣成pdf
第⼆步: 在需要的地⽅引⼊插件
import html2Canvas from "html2canvas";
import JSPDF from "jspdf";
第三步: 使⽤插件⽣成PDF
网页html下载HTML代码代码
//这是你要绑定的盒⼦,⾥⾯是你需要打印的内容
JS部分代码
printOut() {
let pdfDom = document.querySelector("#pdfWrap"); //这⾥绑定你要转换的页⾯
console.log(pdfDom.offsetHeight)
pdfDom.style.background = "#FFFFFF";
let _this = this;
let pdfPage = null;
html2Canvas(pdfDom,{
//开始截图，这⾥可以设置⼀些截图时的属性
logging: false,
//height:3000,
}).then((canvas)=>{
// 开始将图⽚转换为PDF
var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
var ctx = Context("2d")
console.log(canvas.height)
var a4w = 170; var a4h = 257 // A4⼤⼩，210mm x 297mm，四边各保留20mm的边距，显⽰区域170x257
var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显⽰⽐例换算⼀页图像的像素⾼度
var renderedHeight = 0
while (renderedHeight < canvas.height) {
var page = ateElement("canvas")
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不⾜⼀页
// ⽤getImageData剪裁指定区域，并画到前⾯创建的canvas对象中
pdf.DataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页⾯，保留10mm边距
renderedHeight += imgHeight
if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后⾯还有内容，添加⼀个空页
// delete page;
}
pdf.save('123.pdf')
})
},
如果HTML页⾯⽐较长,⼀定要注意你绑定的dom是不是能够完全显⽰，有没有被overflow影响，导致⾼
度不够，页⾯不能完全被截取.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。