vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图—

问题

最开始需要做一个网页的截图，结果发现有滚动条怎么都截取不成功，然后各种百度到了一个办法，就是复制那个节点到body，然后在截取那个复制的节点，小页面实验了一下，成功了好开心，代码是这样的。但是，有但是o(╥﹏╥)o。(最后附完整代码)

方法1（这里示例保存为图片）

这个方法如果你没有echarts图表，是可以实现滚动条完整截图的，测试过没有问题；

 //这个是保存为图片的方法function saveFile(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};//截图的关键代码let targetDom = document.getElementById('pdfContentsDiv');   //原本需要截图的divlet clonedNode = targetDom.cloneNode(true); //复制一个clonedNode.setAttribute("style",`width: ${targetDom.clientHeight};height: ${targetDom.clientWidth};`);  document.body.appendChild(clonedNode); //放到body后面html2Canvas(clonedNode, {  allowTaint: true,  taintTest: false,  }).then(function (canvas) {//这里保存为图片或保存到pdf的代码，这里示例保存为图片var pageData = canvas.toDataURL('image/jpeg', 1.0);saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");document.body.removeChild(clonedNode);  //最后记得移除截图时添加的})

方法二：解决页面中有echarts图表，复制后图表位置为空

然后，又开始各种尝试，在坑里面走了两天以后，最后终于发现了html2canvas截图成功的一个标准就是，外层div的高度跟里面需要截图的内容的高度一致就能完整的截图，（比如需要截图的外层div是800的高度有滚动条，里面的需要截图的内容是1800的高度，截图的时候就把1800的高度给需要截图的那个div就能完整截图），代码如下:

     //截图的关键代码let targetDom = document.getElementById('pdfContentsDiv'); //需要截图的divlet domScrollHeight=targetDom.scrollHeight;  //获取滚动的高度targetDom.setAttribute("style",`height: ${domScrollHeight}px;`);  // 把高度赋值给需要截图的那个divhtml2Canvas(targetDom , {  allowTaint: true,  taintTest: false,  }).then(function (canvas) {//这里是保存为图片或保存到pdf的代码，最后有保存为pdf的完整代码。......targetDom.setAttribute("style",`height: 800px;`); //截图完成后最后记得把高度恢复})

总结

各种测试发现，截图成功的标准就是，把内层所有div的高度加起来（scrollHeight高度），给外层那个截图的div，就能把有滚动条的完整截图了。

完整步骤代码

安装html2canvas和jspdf

npm install html2canvas jspdf --save

<template><div><el-button type="primary" icon="el-icon-download"  @click="reportPdf()">导出2</el-button><div id="pdfContentsDiv"><div style="width:100%;height:600px;background:red"></div><div style="width:100%;height:800px;background:green"></div><div style="width:100%;height:400px;background:yellow"></div></div></div>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {data() {return {}},created() {},methods: {reportPdf() {let targetDom = document.getElementById('pdfContentsDiv');  let domScrollHeight=targetDom.scrollHeight;targetDom.setAttribute("style",`height: ${domScrollHeight}px;`);html2Canvas(targetDom, {  allowTaint: true,  taintTest: false,  }).then(function (canvas) { let contentWidth = canvas.width;let contentHeight = canvas.height;let a4Height = 841.89;let a4Width = 595.28;let per = (contentWidth / a4Width) * 0.75; //这个主要是为了防止宽度不够的//一页pdf显示html页面生成的canvas高度;let pageHeight = (contentWidth / a4Width) * a4Height;//未生成pdf的html页面高度let leftHeight = contentHeight;//一页pdf显示html页面生成的canvas高度;var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);//页面偏移let position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高let imgWidth = a4Width;let imgHeight = (a4Width / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0);let pdf = new JsPDF("", "pt", [a4Width, a4Height]); //不分页    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 -= a4Height;//避免添加空白页if (leftHeight > 0) {pdf.addPage();}}}pdf.save('title');targetDom.setAttribute("style",`height: 800px;`);});}, },
};
</script>

<style scoped>#pdfContentsDiv{overflow:auto;width:100%;height:800px;}
</style>

最后的最后，如果有帮助到大家的话，可以给我留言或者点赞哦，感觉有帮助到别人，我也会很开心~~~

vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf相关推荐

vue 页面转pdf 并下载
最近需要做一个下载vue页面为pdf格式的功能,网上方案有很多,也尝试了其他方案,最终采用的方案流程就是点击下载报告按钮,则请求后端一个接口,例如接口地址为example.cn/file/downl ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图
功能: 1.兼容 PC 和 Mobile: 2.对指定的区域进行截取: 3.可以控制截图大小: 4.截图生成base64图片地址一.安装插件 npm install html2canvas --sa ...
html2pdf vue,VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断
1.安装html2canvas和JsPdf //第一个.将页面html转换成图片 npm install --save html2canvas //第二个.将图片生成pdf npm install j ...
html2canvas 插件实现网页截图（html保存为图片）
1.html2canvas 官网: http://html2canvas.hertzen.com/ html2canvas 是一款利用javascript进行屏幕截图的插件.可以使用两种语法格式进行截 ...
vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
文章目录 vue 页面内切换dom,页面跳转后都不置顶? 一.页面内操作: 1.1 代码如下: 二.页面之间跳转: 2.1 代码截图 · 说明: 2.2 增加代码 · 示下: 三.拓展 · (直接置 ...
vue页面传参（多个参数传值）与接参 - 代码篇
index.js路由规则设定: /searchResult/syyName=:syyName 发送页面: //传参页面 this.$router.push({name: 'SearchResult', ...
vue页面返回消息头获取_vue在响应头response中获取自定义headers操作
日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作. 系统为了安全会 ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...

vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf

问题

方法1（这里示例保存为图片）

这个方法如果你没有echarts图表，是可以实现滚动条完整截图的，测试过没有问题；

方法二：解决页面中有echarts图表，复制后图表位置为空

总结

完整步骤代码

vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf相关推荐

最新文章

热门文章