vue 将html页面转为pdf js方法
第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save
创建一个js文件 内容如下
// 导出页面为PDF格式,宽度大于高度
/**
* 用于 t-student-attendance 学生端-学生管理-学生考勤-下载记分册(任课老师和班主任)
*/
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
printPdfBigWidth
}
/**
* @param ele 要生成 pdf 的DOM元素(容器)
* @param pdfName PDF文件生成后的文件名字
* @param pos 调整间距 {left:25,top:25}
* */
function printPdfBigWidth(ele, pdfName) {
document.querySelector('#demo').style.padding='0'
document.querySelector('#pdf-btn').style.display='none'
//留白 放置一个空白的图片
var whiteImg =
"data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk2QjIxRjMxMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk2QjIxRjMyMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTZCMjFGMkYwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTZCMjFGMzAwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAIAxUDAREAAhEBAxEB/8QASwABAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//2Q==";
html2Canvas(ele, {
scale:2 // 提升画面质量,但是会增加文件大小
}).then(function(canvas) {
document.querySelector('#demo').style.padding='20px'
document.querySelector('#pdf-btn').style.display='block'
// 得到canvas画布的单位是px 像素单位
var contentWidth = canvas.width;
var contentHeight = canvas.height;
// 将canvas转为base64图片
var pageData = canvas.toDataURL("image/jpeg", 1.0);
// 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
// var imgW = (contentWidth / 2) * 0.75;
var imgH = (contentHeight / 2) * 0.75;
//页面留白
var whiteHeight = 15;
let left =15;
let top=whiteHeight;
//偏移量
var position = whiteHeight;//初始化顶部偏移量
var pageTempHeight = imgH;//图片高度留存
//一张pdf容器尺寸
// var pdfW = (841.89 / 2) * 0.75;
// var pdfH = (595.32 / 2) * 0.75;
var pdfW = 595.28-2*left;
var pdfH = 850-2*top;
// 初始化jspdf 第一个参数方向:默认''时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小型号如a4等,单位是pt
var PDF = new JsPDF("", "pt", "a4");//默认不填时为纵向打印,需横向打印 写 l ,
// 容器大于内容区高度,打印一次完毕
if (pdfH > imgH) {
PDF.addImage(pageData, "jpeg", left, position, pdfW, imgH);// 内容区
PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW+2*left, whiteHeight);//顶部留白
PDF.addImage(whiteImg, "jpeg", 0,pdfH+top,pdfW+2*left, whiteHeight);//底部留白
// 容器小于内容区高度,打印多次
} else {
// eslint-disable-next-line no-unused-vars
var i=-1;
while (pageTempHeight > 0) {
i++;
// 这里的顺序一定是先把内容绘制完毕,然后再绘制上下的遮挡间隔
PDF.addImage(pageData, "jpeg", left, position, pdfW, imgH);// 内容区
PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW+2*left, whiteHeight);//顶部留白
PDF.addImage(whiteImg, "jpeg", 0,pdfH+top,pdfW+2*left, whiteHeight);//底部留白
// PDF.text(left+100, i*(position+pdfH),'-------------------------- i*(position+pdfH) '+i*(position+pdfH)+'-----------------------------');
pageTempHeight-=pdfH;//控制循环,大于0时继续循环
position-=pdfH;
if (pageTempHeight > 0) {
PDF.addPage();
}
}
}
// 将内容图片添加到pdf中
PDF.save(pdfName + ".pdf");
});
}
需要下载的组件页面中
html
<div>
<ul id="demo" class="pdf-preview"></ul>
<button @click="handleDownloadFile" id="pdf-btn" class="pdf-down">下载</button>
</div>
js
handleDownloadFile() {
// 下载时间页面滑动到最上面,防止有半屏
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
printPdfBigWidth.printPdfBigWidth(
document.querySelector("#demo"),
"个人档案"
);
},