一、前言
jspdf是一款开源插件,主要用于集成pdf文件;html2canvas是一个借助canvas将元素生成图片的一款插件。二者搭配使用可前端实现pdf文件的生成。
二、使用步骤
1.安装
代码如下:
npm install html2canvas
npm install jspdf
2.引入插件
代码如下:
// 新建pdf.js文件,导入插件
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
3.根据自身业务编写所需代码
代码如下:
export default {
install (Vue, options) {
Vue.prototype.ExportSavePdf = function (html,htmlTitle, currentTime) {
// var element = document.getElementById(html)
// html2canvas(element, {
// logging: false
// }).then(function (canvas) {
// var pdf = new JSPDF("p", "mm", "a4") // A4纸,纵向
// var ctx = canvas.getContext("2d");
// var a4w = 190; var a4h = 297 // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257
// var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
// var renderedHeight = 0
// while (renderedHeight < canvas.height) {
// var page = document.createElement("canvas")
// page.width = canvas.width
// page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
// // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
// page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
// pdf.addImage(page.toDataURL("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(htmlTitle + currentTime)
// })
// 解决生成文件时漏掉一些元素问题
document.documentElement.scrollTop = 0
var element = document.getElementById(html)
console.log(element.clientWidth)
var title = htmlTitle; //PDF文件标题
var c = document.createElement("canvas");//创建照片
var opts = {
scale: 1,
canvas: c,
logging: true,
width: element.clientWidth,
height: element.clientHeight
};
//照片高度和宽度是页面元素的两倍
c.width = element.clientWidth
c.height = element.clientHeight
c.getContext("2d").scale(1, 1);
html2canvas(element, opts)
.then(function(canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 1000 * 1600
let leftHeight = contentHeight
let position = 0
let imgWidth = 1000
let imgHeight = 1000 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JSPDF('', 'pt', 'a2')
if (leftHeight < pageHeight) {
//第一个20是img和pdf页面的左边距,第二个20是img与pdf页面的上边距
PDF.addImage(pageData, 'JPEG', 100, 100, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 100, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 811.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
}
}
}
4.页面使用
代码如下:
<el-button
type="primary"
class="nor-icon_btn-base"
@click="ExportSavePdf('pdfCentent1', 'xxxxxxxx')">
下载pdf
</el-button>
5.解决html2canvas图片不清晰方法
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var scale = 4;
canvas.width = 70 * scale;
canvas.height = 70 * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 4,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关,便于查看html2canvas的内部执行流程
width: 70, //dom 原始宽度
height: 70,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#capture"), opts).then(canvas => {
document.body.appendChild(canvas);
});