前端html生成PDF

需要用到的组件

1、html2canvas
地址：http://html2canvas.hertzen.com/
安装：npm install --save html2canvas
2、jsPDF
地址：https://github.com/parallax/jsPDF
安装：npm install jspdf --save

代码

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'export default function (name, dom) {// returnlet targetDom = document.querySelector(dom)let scrollTop = document.documentElement.scrollTop || document.body.scrollTopconst steup = {allowTaint: true, // 是否允许跨源图片useCORS: true, // 是否尝试使用 CORS 从服务器加载图像height: targetDom.offsetHeight,width: targetDom.offsetWidth,windowWidth: document.body.scrollWidth, // 渲染Element时使用的窗口宽度windowHeight: document.body.scrollHeight, // 渲染Element时使用的窗口高度x: 0,y: scrollTop, // 用网页滚动的高度定位y轴顶点dpi: window.devicePixelRatio * 2,scale: 2 // 用于渲染的比例。}html2Canvas(targetDom, steup).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.height// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28let a4Height = 841.89let imgHeight = Math.floor(imgWidth / contentWidth * contentHeight)// 一页pdf显示html页面生成的canvas高度; pageHeight + 2是为了去掉最后的空白页let pageHeight = Math.floor(contentWidth / imgWidth * a4Height) + 2// 未生成pdf的html页面高度let leftHeight = contentHeight//页面偏移let position = 0// 返回图片dataURL，参数：图片格式和清晰度(0-1)let pageData = canvas.toDataURL('image/jpeg', 1.0)/*** new JsPDF(x, y, z)* x: 排版方向，默认是竖版 landscape* y: 单位* z: 尺寸* **/let PDF = new JsPDF('', 'pt', 'a4')// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {// 20, 0 l两个参数分别控制 左边 上边的距离, 此处将页面高度按照a4纸宽高比列进行压缩PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= a4Height//避免添加空白页if (leftHeight > 0) {PDF.addPage()}}}PDF.save(name + '.pdf')})
}

在页面中使用

import htmlToPDF from '@/utils/htmlToPDF'methods: {getPdf () {htmlToPDF('PDF名称', 'ID')}}