使用html2canvas+jspdf实现，可直接复制过去用
既然是第三方的库还是要免不了的要安装，安装使用如下语句：
npm i --save html2canvas jspdf
操作方法是首先使用html2canvas将页面中选定的元素转换成图片，然后将图片插入到pdf中，接着再下载下来。
使用import导入到项目中以后就能直接使用了。
import html2canvas from 'html2canvas'import jsPDF from 'jspdf'
接下来看html部分，我们需要将要转为PDF的内容放置在准备好的容器里。只需要在warp中写好要相应的模版，然后先请求相关数据渲染。之后调用方法打印内容。
<div class="print"><div ref="wrap" class="wrap"><!-- 放置内容 --></div></div>
在wrap盒子内部写入需要转换的内容，接下来调用方法：
print(orderNo) {// 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载let top = this.$refs.wrap;console.log(top);if (top != null) {top.scrollIntoView();top = null;}html2canvas(this.$refs.wrap, {allowTaint: true,}).then(function (canvas) {const contentWidth = canvas.width;const contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;let pageHeight = (contentWidth / 592.28) * 841.89;//未生成pdf的html页面高度let leftHeight = contentHeight;//页面偏移let position = 0;//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);const 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();}}}// const pageData = canvas.toDataURL("image/jpeg", 1.0);// //p表示纵向，l表示横向，px是单位 ,[宽，长]->[x,y]// const PDF = new JsPdf("p", "px", [2550, 3100]);// PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100);PDF.save(orderNo + ".pdf");});},
注：打印的时候最好给warp盒子加一些padding否则内容紧贴边缘不好看
如：顶部和两边是完全贴合边缘的
所以根据自己所需加一定内边距就好了
完整代码： 页面元素更换成自己所需就好啦
<template><div class="print"><div ref="wrap" class="wrap"><div class="slip"><button @click="print">下载</button><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></div></div></div></template><style scoped>.box {width: 100%;height: 300px;background-color: pink;}li {background-color: #000;}.wrap {/* padding: 60px; */}</style><script>import html2canvas from "html2canvas";import jsPDF from "jspdf";export default {name: "app",components: {},data() {return {};},mounted() {},methods: {print(orderNo) {// 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载let top = this.$refs.wrap;console.log(top);if (top != null) {top.scrollIntoView();top = null;}html2canvas(this.$refs.wrap, {allowTaint: true,}).then(function (canvas) {const contentWidth = canvas.width;const contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;let pageHeight = (contentWidth / 592.28) * 841.89;//未生成pdf的html页面高度let leftHeight = contentHeight;//页面偏移let position = 0;//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);const 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();}}}// const pageData = canvas.toDataURL("image/jpeg", 1.0);// //p表示纵向，l表示横向，px是单位 ,[宽，长]->[x,y]// const PDF = new JsPdf("p", "px", [2550, 3100]);// PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100);PDF.save(orderNo + ".pdf");});},
