Vue使用jspdf和html2canvas组件库结合导出PDF文件

效果图:

1、安装依赖:

javascript 复制代码
npm install html2canvas --save
npm install jspdf --save
或
yarn add html2canvas --save
yarn add jspdf --save

2、封装全局调用方法:this.$exportPDF('#id','文件名')

新建js文件:@/utils/html2Pdf.js(文件名、位置自义,挂载路径正确即可)

javascript 复制代码
import Vue from 'vue'
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

/**
 * @param {String} id    html节点标签id名
 * @param {String} title 导出PDF的文件名||不传默认zxy.pdf
 */

Vue.prototype.$exportPDF = function(id, title = 'zxy') {
	html2Canvas(document.querySelector(id), {
		allowTaint: true,
		taintTest: false,
		useCORS: true, //是否尝试使用CORS从服务器加载图像
		dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
		scale: 4, // 按比例增加分辨率
		logging: true, // 可以长屏分页导出
		async: false, //是否异步解析和呈现元素
	}).then(function(canvas) {
		let contentWidth = canvas.width
		let contentHeight = canvas.height
		let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
		let leftHeight = contentHeight //未生成pdf的html页面高度
		let position = 0 //pdf页面偏移
		//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
		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一页显示的范围,是否分页
			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`)
	})
}

3、全局挂载:main.js文件

javascript 复制代码
import '@/utils/html2Pdf';

4、页面使用:

设置需要导出HTML节点id名:

html 复制代码
<div style="width: 700px; padding: 18px;" id='printBill'>
        .....
</div>

调用导出PDF方法:

javascript 复制代码
exportPDF() {
	this.$exportPDF('#printBill','结算票据')//id名必传,PDF文件名可传可不传
},
相关推荐
丿BAIKAL巛1 小时前
如何使用Java生成pdf报告
java·pdf
霍志杰2 小时前
iframe加载或者切换时候,短暂的白屏频闪问题解决
前端·javascript·chrome
愛芳芳3 小时前
vue3+element-plus+pinia完整搭建好看简洁的管理后台
前端·javascript·vue.js
麻辣香蝈蝈4 小时前
【Vue3】一文学会动态路由和编程式路由的使用
开发语言·前端·javascript·vue.js
CarryBircks4 小时前
nvm版本管理下pnpm 安装失败问题解决
前端·vue.js
magic 2455 小时前
AJAX get请求如何提交数据呢?
前端·javascript·ajax
i1yo_kiki6 小时前
Ajax快速入门教程
前端·javascript·ajax
时间识人6 小时前
【无标题】
vue.js·微信小程序·taro
百锦再6 小时前
微信小程序学习基础:从入门到精通
前端·vue.js·python·学习·微信小程序·小程序·pdf
霖007 小时前
同步/异步电路;同步/异步复位
开发语言·前端·javascript·嵌入式硬件·fpga开发·信号处理