公司业务的月报页面,要实现pdf下载,查了资料,大概有个方向,就是利用html2canvas把html转为图片,然后再生成pdf格式的文件实现了下载。
核心代码
import html2canvas from 'html2canvas';
import JSPDF from 'jspdf';
export default {
install(Vue, options) {
Vue.prototype.ExportSavePdf = function(htmlTitle, currentTime) {
document.documentElement.scrollTop = 0;
let element = document.getElementById('pdfCentent');
html2canvas(element, {
logging: false,
scale: 2
}).then(function(canvas) {
// let pdf = new JSPDF('p', 'mm', 'a4'); // A4纸,纵向
// let ctx = canvas.getContext('2d');
// let a4w = 170;
// let a4h = 257; // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257
// let imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
// let renderedHeight = 0;
// while (renderedHeight < canvas.height) {
// let 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);
// 整页 2
let contentWidth = canvas.width;
let contentHeight = canvas.height;
// 将canvas转为base64图片
let pageData = canvas.toDataURL('image/jpeg', 1.0);
// 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
let pdfX = ((contentWidth + 10) / 2) * 0.75;
let pdfY = ((contentHeight + 100) / 2) * 0.75; // 500为底部留白
// 设置内容图片的尺寸,img是pt单位
let imgX = pdfX;
let imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离
// 初始化jspdf 第一个参数方向:默认''时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小,单位是pt
let PDF = new JSPDF('', 'pt', [pdfX, pdfY]);
// 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0
PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
PDF.save(htmlTitle);
});
};
}
};
其中
document.documentElement.scrollTop = 0
解决了当页面滚动到底部的时候,下载pdf,前面页有大量空白的问题
在调用new JSPDF的时候,第三个参数为控制生成出来的PDF的宽高,如果要用A4大小的PDF,可以传a4,但是会存在分页截断的问题,代码中有两种方案分页和不分页的。