Vue
2021-07-19 本文已影响0人
誰在花里胡哨
image.png
🔥 jsPDF-文档地址
🔥 jsPDF-文档地址
主要用到了html2canvas,jspdf
,原理就是将页面内容转为一个 canvas,也可以理解为先把页面转成图片,然后再把图片转成 PDF。
这里涉及到一个分页的问题,主要是因为 A4纸
的原因,所以pdf的储存基本都会有一个固定的内容高低,代码中有提到。
移动端截屏保存当前图片
解决html2canvas截图不全的问题
导出html为PDF内容截断终极解决方案
导出为横向的PDF
如何添加水印
导出PDF压缩
代码如下:
<template>
<div>
<div ref="IMG">
<ol>
<li v-for="item in 50" :key="item">
<h1>页面转PDF</h1>
</li>
</ol>
</div>
<div @click="imgDownload" class="download">转PDF</div>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
data() {
return {
imgURL: ""
};
},
methods: {
// 图片保存方法
imgDownload() {
let _this = this;
// 获取需转图片的范围元素
let img = this.$refs["IMG"];
// 图片高度
var w = parseInt(window.getComputedStyle(img).width);
// 图片宽度
var h = parseInt(window.getComputedStyle(img).height);
//滚轮置顶,避免留白
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// 利用 html2canvas 下载 canvas
html2canvas(img).then(function(canvas) {
//转化为本地的图片地址
_this.imgURL = canvas.toDataURL();
var filename = "导出的文件.pdf";
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (w / 592.28) * 841.89;
//未生成pdf的html页面高度
var leftHeight = h;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = (592.28 / w) * h;
// new jsPDF("l", "pt", "a4"); l 表示横向导出;true表示压缩pdf,否则文件会很大
var pdf = new jsPDF("p", "pt", "a4");
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(_this.imgURL, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
// 分页
while (leftHeight > 0) {
pdf.addImage(
_this.imgURL,
"JPEG",
0,
position,
imgWidth,
imgHeight
);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
//转pdf下载
pdf.save(filename);
});
}
}
};
</script>
<style scoped>
h1{
text-align: left;
}
.download{
position: fixed;
width: 100px;
height: 60px;
background: blueviolet;
color: white;
font-size: 20px;
text-align: center;
line-height: 60px;
right: 0;
bottom: 50px;
z-index: 99;
cursor: pointer;
}
</style>