jspdf.js+html2canvas将HTMl导出PDF

HTML文章/教程1年前 (2022)发布勤奋小助

0 0

jspdf.js+html2canvas将HTMl导出PDF

功能：

PDF分页插入页头页尾
输出A4格式PDF
支持单页、多页输出

效果预览：
查看演示PDF
demo地址：
demo

需要引入JS的文件：

<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.js"></script>

主要代码如下：

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
};

原文链接：https://www.cnblogs.com/zh1q1/p/15433311.html
本文来源爱码网，其版权均为原网址所有与本站无关，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源。