jspdf.js+html2canvas将HTMl导出PDF
功能：
- PDF分页插入页头页尾
- 输出A4格式PDF
- 支持单页、多页输出
需要引入JS的文件：
主要代码如下：
function pdfMap() {
html2canvas(document.querySelector("img")).then(canvas => {
//console.log(canvas)
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 595.28 * 841.89;
//console.log(canvas总高度：${contentHeight}, 一页渲染的高度：${pageHeight});
var ctx = canvas.getContext("2d");
// 新canvas控件- 保存裁剪后的图片
var newCanvas = document.createElement("canvas");
var newCtx = newCanvas.getContext("2d");
// 定义插入图片的宽高，高度要等比例缩放
var renderImgWidth = 570.28; // 根据pdf页面宽度决定
// 固定的图片宽度 除以 渲染的canvas宽度 得出 宽度缩放比例，根据这个比例 乘以 渲染的canvas高度 得出 图片实际的高度
var renderImgHeight = null; // (renderImgWidth / contentWidth) * pageHeight;
// 截取图片高度偏移值
var positionTop = 0;
// 渲染pdf start
var doc = new jsPDF('', 'pt', 'a4');
// 引用外部字体，解决中文格式问题
doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
doc.setFont('SourceHanSans-Normal');
doc.setFontSize(6)
// 向上取整计算分页数
var pageSize = Math.ceil(contentHeight / pageHeight)
//console.log('计算分页数：', pageSize);
// for循环插入页头页尾，图片
for (let i = 0; i < pageSize; i++) {
// 动态识别裁剪后图片高度，防止插入图片时比例失调
renderImgHeight = (renderImgWidth / contentWidth) * ((contentHeight - positionTop) > pageHeight ? pageHeight : contentHeight - positionTop)
//console.log('page', i + 1, '/' + pageSize);
doc.text(10, 8, formatDate())
doc.text(280, 8, '这是pdf页头xxxxx')
doc.text(10, 835, '页尾xxxxx')
doc.addImage(cropCanvas(ctx, newCanvas,newCtx, contentWidth, contentHeight, positionTop, pageHeight), 'JPEG', 10, 10, renderImgWidth, renderImgHeight);
if (i + 1 < pageSize) {
doc.addPage()
positionTop += pageHeight
// renderImgHeight = (renderImgWidth / contentWidth) * ((contentHeight - positionTop) > pageHeight ? pageHeight : contentHeight - positionTop)
}
}
doc.save("autoprint.pdf")
});
// 裁剪canvas
function cropCanvas(ctx, newCanvas, newCtx, contentWidth, contentHeight, positionTop, pageHeight) {
//console.log(contentWidth, contentHeight, positionTop, pageHeight)
// 裁剪- （获得像素数据）宽度跟原图一致，高度只截取一页pdf的渲染高度
var imgRgbData = ctx.getImageData(0, positionTop, contentWidth, pageHeight);
console.log(imgRgbData);
// 把裁剪后的像素数据渲染到新canvas
newCanvas.setAttribute("width", contentWidth)
newCanvas.setAttribute("height", (contentHeight - positionTop) > pageHeight ? pageHeight : contentHeight - positionTop)
newCtx.putImageData(imgRgbData, 0, 0)
// 获取裁剪后图片的base64数据
var imgBase64 = newCanvas.toDataURL("image/jpeg", 1.0)
//console.log(imgBase64);
return imgBase64
};
Original: https://www.cnblogs.com/zh1q1/p/15433311.html
Author: 吴知木
Title: jspdf.js+html2canvas将HTMl导出PDF
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/599152/
转载文章受原作者版权保护。转载请注明原作者出处！