前言
最近遇到的需求，把html转成pdf文件下载导出。
目前网上看了下，有三种方法，但是其中两种需要后端配合
一种是纯前端实现的，比较简单。所以就使用了这种。
也就是html2canvas + jspdf 的这种方法
这种方法实现的思路就是，通过html2canvas 把元素内的数据截图出来成一个图片
然后把这个图片通过jspdf 方法转成pdf格式输出出来
但是也有缺点，就是只是一个图片，而且清晰度也没有那么高。
只能说勉强实现一个需求，先应付一下，后续会继续看其他的写法，然后更新
效果图
这里是导出来后的效果，pdf格式的。只有一页
这里是网页上的，这个报告都是我排班出来的，图片和数据都是网上随便复制的，点击导出后会生成一个pdf文件。右边一大串的是base64格式的图片地址。也就是截图。
代码
这是html版本的，然后引入了vue的框架。
这里核心的是要引入html2canvas.js和jspdf.debug.js
资源的话我上传了，可以点击我的资源去下载，我设置了0积分下载，应该是可以直接下载
如果你们用的是纯vue版本，那就简单了。直接npm 下载这两个插件就行。
第一个.将页面html转换成图片 npm install --save html2canvas
第二个.将图片生成pdf npm install jspdf --save
<!DOCTYPE html>
<html><head><meta charset='UTF-8'><!-- 先引入 Vue --><script src='vue.js'></script><!-- 引入element-UI组件 --><script src='element.js'></script><link rel='stylesheet' href='element-index.css'><!-- 引入axios --><script src='axios.min.js'></script><!-- 引入html2canvas 和 jspdf.debug--><script src='./node_modules/html2pdf/js/html2canvas.js'></script><script src='./node_modules/html2pdf/js/jspdf.debug.js'></script></head><body><div id="app"><div class="layout"><div><button @click="downBtn" style="width: 70px; height: 30px" id="download-paper">pdf导出</button></div><div ref="html2canvas" id="html2canvas"><div class="title"><div class="title_img"><img src="https://img2.baidu.com/it/u=384718229,1745978279&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=461" alt="" style="width: 70px;" crossorigin="anonymous"></div><div class="title_text"><p class="yiyuan">第一人民医院</p><p style="font-size: 18px;font-weight:bold">消化内镜检查及手术记录报告</p></div></div><div class="info1"><div class="info1left">检查号：12-10266</div><div class="info1right">仪器型号：12-10266</div></div><div class="info2"><div class="info2top"><div>姓名：王小天</div><div>性别：男</div><div>年龄：34岁</div><div>科别：内科</div><div>申请医师：黄小燕</div></div><div class="info2bottom"><div>病历号：12312313546546464</div><div>住院号：y229397</div><div>病区号：四病区</div><div>床位号：409</div></div></div><div class="info3"><div>检查图像:</div><div><img :src="item" alt="" class="changimg" v-for="item,index in img2" :key="index" crossorigin="anonymous"></div></div><div class="info4"><div style="font-weight: bold;margin-bottom: 5px;">内镜所见</div><div style="font-size:14px;">食管:黏膜光滑柔软，血管纹理清晰，扩张度好，齿状线清晰。贲门:粘膜光滑，未见异常。 胃底:见一枚0.4*0. 4cm大小息肉，表面充血，予以摘除送检，粘液湖黄色，大量。胃体:粘膜色泽潮红，下部窦体交界后壁见粘膜凹陷不平，片状发红，子以活检。胃角:后壁见片状发红糜烂灶，予以活检。胃窦: 胃窦后壁见大片状食管:黏膜光滑柔软，血管纹理清晰，扩张度好，齿状线清晰。贲门:粘膜光滑，未见异常。 胃底:见一枚0.4*0. 4cm大小息肉，表面充血，予以摘除送检，粘液湖黄色，大量。胃 体:粘膜色泽潮红，下部窦体交界后壁见粘膜凹陷不平，片状发红，子以活检。胃角:后壁见片状发红糜烂灶，予以活检。胃窦: 胃窦后壁见大片状发红病灶，表面不平，部分隆起、部分凹陷，染色表面结构紊乱，予以活检。幽门: 呈圆形，开闭尚可，粘膜色泽淡红，未见出血及渍疡。十二指肠: 球部及降部未见异常。活检。幽门: 呈圆形，开闭尚可，粘膜色泽淡红，未见出血及渍疡。十二指肠: 球部及降部未见异常。</div><div style="font-weight: bold;margin-bottom: 5px;margin-top: 10px;">镜下诊断</div><div style="font-size:14px;">1，胃多发病灶性质待定2，胃底息肉镜下摘除3，胆汁反流性胃炎</div><div style="font-weight: bold;margin-bottom: 5px;margin-top: 10px;">病理号：</div><div style="font-weight: bold;margin-bottom: 5px;margin-top: 10px;">活检部位：胃底、窦体交界后壁、胃窦后壁、</div><div style="font-weight: bold;margin-bottom: 5px;margin-top: 10px;">病理诊断：</div><div style="font-weight: bold;margin-bottom: 5px;margin-top: 10px;">医生建议：</div></div><div class="info5"><div>南京索图科技有限公司</div><div>手术及诊断医师：王晓</div><div>助手：</div><div>检查日期：2022/8/27</div></div><div style="text-align:center;font-weight: bold;font-size: 14px;">仅供临床参考，不做证明材料！</div></div></div></div>
</body>
<script>new Vue({el: '#app',data() {return {img2: ['https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb','https://pics6.baidu.com/feed/562c11dfa9ec8a13d9cd9e4f08e1e488a2ecc0b1.jpeg?token=687c57c1c319d6c576d27df01e88c2cb',]};},mounted() {},methods: {downBtn() {let dom = document.getElementById("html2canvas");//调用方法下载html2canvas(dom, {useCORS: true, //允许跨域allowTaint: false,logging: false,letterRendering: true,ddpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4, //按比例增加分辨率background: '#fff'//pdf背景色为白色，默认是黑色的}).then((canvas) => {//返回图片dataURL，参数：图片格式和清晰度(0-1)var pageData = canvas.toDataURL('image/jpeg', 1.0);//方向默认竖直，尺寸ponits，格式a4[595.28,841.89]var pdf = new jsPDF('', 'pt', 'a4');//addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);//保存到pdf，名字是stonepdf.save('stone.pdf');});},},})
</script>
<style>#html2canvas {width: 800px;height: 1280px;padding: 20px;}.title {display: flex;justify-content: center;align-items: center;height: 100px;}.title_text {display: flex;flex-direction: column;align-items: center;}.yiyuan {font-size: 20px;font-weight: bold;color: blue;}.info1 {height: 30px;display: flex;justify-content: space-between;border-bottom: 1px solid #222;}.info2 {height: 100px;border-bottom: 1px solid #222;}.info3 {border-bottom: 1px solid #222;}.info4{border-bottom: 1px solid #222;}.info5{display: flex;justify-content: space-around;align-items: center;height: 50px;}.info2top {display: flex;justify-content: space-around;align-items: center;height: 40px;}.info2bottom {display: flex;justify-content: space-around;align-items: center;height: 40px;}.changimg {width: 180px;margin-right: 15px;}
</style></html>
细节事项
1，模糊问题通过html2canvas方法内的ddpi和scale放大控制清晰度
2，你下载的时候，导出按钮要放在上面，不能放在最下面，因为可能会由于你页面长了有滚动条，当你滚动到下面点击按钮的时候，上面滚动条看不到的部分是不会被截图的，也就是截图不全。但是如果你把按钮放在顶部，那就可以截全，哪怕下面的滚动部分看不到也可以截全，不知道是为啥。反正这个坑我是踩了，提醒你们一下。
3，这里是简单版本，所以没有分页功能，如果需要分页功能可以去网上找一下，pdf.addPage();这个方法就是添加新的分页，可以通过判断是否后面还有内容来触发这个方法，网上到处都是可以直接复制使用
这里给你们随便复制一个人的代码做参考
getPdf(title,url) {html2Canvas(document.querySelector('#pdfDom'), {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍scale:4 //按比例增加分辨率}).then(canvas=>{var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向var ctx = canvas.getContext('2d'),a4w = 190, a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4显示比例换算一页图像的像素高度renderedHeight = 0;while(renderedHeight < canvas.height) {var page = document.createElement("canvas");page.width = canvas.width;page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能内容不足一页//用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); //添加图像到页面，保留10mm边距renderedHeight += imgHeight;if(renderedHeight < canvas.height) {pdf.addPage();//如果后面还有内容，添加一个空页}// delete page;}//保存文件pdf.save(title + '.pdf')})}————————————————
版权声明：本文为CSDN博主「inticaler」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/MICHAEL_PRINCE/article/details/118667848
4，注意这里页面的图片都是需要添加 crossorigin=“anonymous” 这句话的，这句话的意思是图片允许跨域，不然会出现图片空白的情况。
5，图片的地址如果你要测试，他只能接受http的那种或者base64格式的。不可以本地引入，像 . /xxx/xxx/xxx.png这种的路径是会报错的，我这里用的测试图片都是网络上的地址。
2023/5/22更新，如果需要导出图片格式，用这个方法就行了。其他啥也不用动
clickGeneratePicture() {let ref = this.$refs.html2canvas; // 截图区域html2canvas(ref, {backgroundColor: "#142E48"}).then(canvas => {let dataURL = canvas.toDataURL("image/png");this.dataURL = dataURL;let creatDom = document.createElement("a");document.body.appendChild(creatDom);creatDom.href = dataURL;creatDom.download = "导出的图片名";creatDom.click();}).catch(err => {this.$message({message: "图片生成失败",type: "error"});});}
