jspdf.js+html2canvas將HTMl匯出PDF

功能：

1. PDF分頁插入頁頭頁尾
2. 輸出A4格式PDF
3. 支援單頁、多頁輸出

效果預覽：
檢視演示PDF
demo地址：
demo

需要引入JS的檔案：

<script src="https://unpkg.com/[email protected]/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