uniapp生成pdf文件

uniapp生成pdf文件

1.需要安装两个插件
(1) html2canvas --将网页转换成图片
(2) jspdf --将图片转换为pdf
uniapp创建完后 在根目录用终端打开

1.初始化项目

 npm init

2.安装所需要的插件

  npm install html2canvas jspdf --save

3.安装之后引入到需要的页面

import html2canvas from 'html2canvas';
import jspdf from 'jspdf';

4.定义生成pdf的方法

downPdf() {
    
    
	window.scrollTo(0, 0) //首先滚动到顶部 如果要某一个元素 就滚动到元素位置
	let that = this;
	html2canvas(document.querySelector('#main'), {
    
    //对应的dom元素id(class也可以)
		allowTaint: true,//是否允许跨域图像渲染画布
		useCORS:true,//是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
	}).then(function (canvas) {
    
    
		//生成的canvas实例
		var contentWidth = canvas.width;//所选元素宽度
		var contentHeight = canvas.height;//所选元素高度
		//一页pdf显示html页面生成的canvas高度;
		var pageHeight = contentWidth / 595.28 * 841.89;
		//未生成pdf的html页面高度
		var leftHeight = contentHeight;
		//pdf页面偏移
		var position = 0;
		//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		var imgWidth = 555.28;
		var imgHeight = 555.28 / contentWidth * contentHeight;
		var pageData = canvas.toDataURL('image/jpeg', 1.0);//转成jpg格式
		var pdf = new jspdf('', 'pt', 'a4');//生成pdf实例
		//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
		//当内容未超过pdf一页显示的范围，无需分页
		if (leftHeight < pageHeight) {
    
    
			pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
		} else {
    
    
			while (leftHeight > 0) {
    
    
				pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
				leftHeight -= pageHeight;
				position -= 841.89;
				//避免添加空白页
				if (leftHeight > 0) {
    
    
					pdf.addPage();
				}
			}
		}
		//保存
		pdf.save('文件名.pdf');
		//可以吧生成的pdf转成其他格式 如 base64
		pdf.output('datauristring')//获取到base64 的pdf
	})
}

pdf 还有其他的格式文档所知

生成的pdf如果想要传给后端 就转换为base64的格式

点个关注支持一下我吧