vue 导出pdf

导入

npm install html2canvas
npm install jspdf

使用 exportPDF("要导出的dom绑定的ID"，“导出pdf文件的名字”)

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';


export default{
    exportPDF(tableId,tableName){
		   var title = tableName; // 导出的pdf文件名
             var targetDom = $("#"+tableId);
			  var copyDom = targetDom.clone();  
			  copyDom.width(targetDom.width() + "px");  
			  copyDom.height(targetDom.height() + "px");  
			  $('body').append(copyDom);  
		   html2Canvas(document.querySelector("#"+tableId), { //导出的html元素
		    allowTaint: true
		   }).then(function (canvas) {
		    let contentWidth = canvas.width;
		    let contentHeight = canvas.height;
		    let pageHeight = contentWidth / 592.28 * 841.89;
		    let leftHeight = contentHeight;
		    let position = 0;
		    let imgWidth = 595.28;
		    let imgHeight = 592.28 / contentWidth * contentHeight;
		    let pageData = canvas.toDataURL('image/jpeg', 1.0);
		    let PDF = new JsPDF('', 'pt', 'a4');
		    if (leftHeight < pageHeight) {
		     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
		    } else {
		     while (leftHeight > 0) {
		      PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
		      leftHeight -= pageHeight;
		      position -= 841.89;
		      if (leftHeight > 0) {
		       PDF.addPage();
		      }
		     }
		    }
		    PDF.save(title + '.pdf');
		   })
	  }
}