前端导出PDF

这里介绍的方案有两个: 1.html2canvas + jsPDF 2.pdfMake

(1)首先html2canvas + jsPDF这种方案主要采取的思路是先采用html2canvas来进行截图,截取后才通过计算每页高度的方式来进行裁剪进行分页，最后通过jsPDF来合成图片

代码:

    public exportPDF(){
	// 要输出的 PDF 每页的宽高尺寸，单位是 pt
	let pageWidth = 592.28  
	let pageHeight = 841.89

	var title=parseInt(document.getElementsByClassName('ag-header-row')[0].style.height.slice(0,-2))+document.getElementById('tt-grid-content').offsetHeight;

	//表头那部分高度
	var titleHeight = 592.28/( this.gridDataWrapper.nativeElement.offsetWidth ) * title;

	//列表每行的高度
	var cellHeight = 592.28/(this.gridDataWrapper.nativeElement.offsetWidth) * 48;

	let page=0;
	//第一页
	//每条数据的索引
	let number=0
	//每页添加空以后  给下一页造成的高度
	let shengHeight = 0;

	var tag =true

	this.rowData.forEach((element,index) => {
		//第一页时执行
		if(page==0){
			//减去表头高度后，计算每页能最多存放的记录数
			number= Math.floor((841.89 - titleHeight) / cellHeight)
			if(index ==number){
				//当达到最大记录数以后 添加个空记录，用于分页时防止数据分割
				this.rowData.splice(number,0,{})
				//记录空记录给下一页表的顶部造成的高度
				shengHeight = cellHeight-(841.89 -titleHeight -cellHeight*number)
				page=1
			}
		}else{
			//获取上一页给本页顶部造成的高度
			let pageNumber = Math.floor((841.89 - shengHeight) /cellHeight)
			//本页刚开始的时候就执行  ，这里不放在下面的if里面是因为  index的最大值是一开始this.rowData的长度  而不是操作后的长度 所以到最后的时候 index是不会等于pageNumber+number+1
			if(tag){   
				this.rowData.splice(pageNumber+number+1,0,{});
				tag=false	
			}
			if(index ==(pageNumber+number+1)){ //当到达本页数据的最大值的时候 就开始为下一页的做数据预处理
				tag=true
				shengHeight = cellHeight-(841.89 -shengHeight -cellHeight*pageNumber)
				number = pageNumber+number+1;
			}
		}
	});
	this.gridDataComponent.gridApi.setRowData(this.rowData)
	this.html2CanvasFun()
}

private html2CanvasFun(){
	html2canvas(this.gridDataWrapper.nativeElement).then((canvas)=>{
		console.log(canvas)
		var contentWidth = canvas.width;
		var contentHeight = canvas.height;
		//一页pdf显示html页面生成的canvas高度;
		var pageHeight = contentWidth / 592.28 * 841.89;
		console.log(pageHeight)
		//未生成pdf的html页面高度
		var leftHeight = contentHeight;
		//页面偏移
		var position = 0;
		//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		var imgWidth = 595.28;
		var imgHeight = 592.28/contentWidth * contentHeight;

		var pageData = canvas.toDataURL('image/jpeg', 1.0);
		var pdf = new jsPDF('', 'pt', 'a4');

		//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
		//当内容未超过pdf一页显示的范围，无需分页
		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('aaaa.pdf');
	})
}

(2)pdfMake这种是采取数据的方式导出
  文档:
  https://pdfmake.github.io/docs/document-definition-object/headers-footers/
  
  
  因为pdfMake不支持中文字体，固自己需要设置字体
  //配置PDF的字体
  //请求取本地字体
	let normal = this.http.get('/assets/font/Semibold.ttf',{responseType: 'blob'});
	let bold = this.http.get('/assets/font/Semibold.ttf',{responseType: 'blob'});
	let italics = this.http.get('/assets/font/Semibold.ttf',{responseType: 'blob'});
	let bolditalics = this.http.get('/assets/font/Semibold.ttf',{responseType: 'blob'});

	let base64data:any =[];
	Observable.zip(normal,bold,italics,bolditalics).subscribe((res: Array<Blob>) =>{
		res.forEach((fontValue)=>{
			//二进制转base64
			let fileReader = new FileReader();
			fileReader.readAsDataURL(fontValue);
			fileReader.onload = function() {
					let resule: any = fileReader.result;  
					let data = resule.substring(resule.indexOf(','));
					base64data.push(data)
			}
			//把字体转成base64的格式后才能识别
			fileReader.onloadend =()=>{
				if(base64data.length ==4){
					pdfMake.vfs = {
						normal:base64data[0],
						bold:base64data[1],
						italics:base64data[2],
						bolditalics:base64data[3],
					};
					pdfMake.fonts = {
						fonts:{
							normal:'normal',
							bold:'bold',
							italics:'italics',
							bolditalics:'bolditalics'
						}
					}
				}	
			}
		});
	});复制代码