利用html2canvas + jspdf将页面内容生成pdf并且下载

本文主要是介绍利用html2canvas + jspdf将页面内容生成pdf并且下载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

依赖安装

npm install html2canvas
npm install jspdf

函数调用以及实现（vue）

// 引入
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'const previewEl = document.getElementById('targetDom')
// 函数调用
this.savePdf(previewEl).then(res => {
})// 函数实现savePdf(html2canvasDom, downloadName = '下载文件') {return html2canvas(html2canvasDom, {// width: 1714,// height: 200,backgroundColor: '#fff',useCORS: true, // 解决文件跨域问题scale: window.devicePixelRatio * 2, // 按比例增加分辨率dpi: 300}).then(canvas => {const a4Width = 595.28const a4Height = 841.89// 可以上传后端或者直接显示// 用于将canvas对象转换为base64位编码var context = canvas.getContext('2d')context.mozImageSmoothingEnabled = falsecontext.webkitImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falselet position = 0// 生成的画布元素宽高const canvasWidth = canvas.widthconst canvasHeight = canvas.height// 页面等比例缩放后宽高const pageWidth = a4Widthconst pageHeight = (a4Width / canvasWidth) * canvasHeight// 返回图片dataURL，参数：图片格式和清晰度(0-1)const jpeg = canvas.toDataURL('image/jpeg', 1.0)// 第一个参数是纵横向，第二个参数是单位，第三个参数是生成pdf的大小，自定义pdf大小的话可以传入一个数组，eg：[164.14, 424.5]// 方向默认竖直，尺寸ponits，格式a4 [595.28,841.89]// const pdf = new JsPDF('', 'pt', [595.28, 841.89]/* [a4Width, a4Height] */)const pdf = new JsPDF('', 'pt', [605.28, 841.89]/* [a4Width, a4Height] */)// const pdf = new JsPDF('', 'pt', [this.contentWidth, 841.89]/* [a4Width, a4Height] */)// const pdf = new JsPDF('', 'pt', 'a4'/* [a4Width, a4Height] */)// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围，无需分页let height = pageHeightif (height < a4Height) {// 第三，四个参数是图片偏移位置，第五六个参数是生成的图片的宽高pdf.addImage(jpeg, 'JPEG', 5, 5, pageWidth, pageHeight) // 从图片顶部开始打印} else {while (height > 0) {pdf.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight)height -= a4Heightposition -= a4Height// 避免添加空白页if (height > 0) {pdf.addPage()}}}pdf.save(`${downloadName}.pdf`)})}