jspdf.js+html2canvas将HTMl导出PDF

jspdf.js+html2canvas将HTMl导出PDF

---

功能：

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

---

效果预览：
查看演示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
};