JavaScript 实现屏幕截图
方法一
需要安装file-saver
,html2canvas
插件
handleExport() { let htmlDom = document.querySelector('#centerPark'); var FileSaver = require('file-saver'); html2canvas(htmlDom, { allowTaint: false, //允许污染 taintTest: true, //在渲染前测试图片(没整明白有啥用) useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释) background: "#fff", }).then(canvas => { if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); } else { canvas.toBlob(function (blob) { FileSaver.saveAs(blob, 'map.png'); }); } }) },
对于地图截图也可以
handleExport() { let map = this.mymap; var FileSaver = require('file-saver') map.once('rendercomplete', function (event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); } else { canvas.toBlob(function (blob) { FileSaver.saveAs(blob, 'map.png'); }); } }); map.renderSync(); },
这个方法的问题是标记标绘可以截不上。
方法二
首先进行预览后在导出成pdf,如下图所示:
image.png
<el-dialog title="专题报告预览" :visible.sync="imgDialogVisible" width="50%" :before-close="handleClose" @open="openDialog"> <!-- <span>点击图片进行下载</span> --> <el-form label-width="100px"> <div class="row"> <el-alert title="点击图片可单独保存图片" type="info"> </el-alert> </div> <div class="row" style="margin-top:10px"> <el-row> <el-col :span="8"> <el-form-item label="制作单位:"> <el-input placeholder="请输入制作单位" v-model="unit"></el-input> </el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="制作人:"> <el-input placeholder="请输入制作人名称" v-model="producer"></el-input> </el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="签发人:"> <el-input v-model="issuer" placeholder="请输入签发人名称" value="admin"></el-input> </el-form-item> </el-col> </el-row> </div> <div class="row"> <el-form-item label="报告内容:"> <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"> </el-input> </el-form-item> <!-- <span><label for="">内容:</label> </span> --> </div> </el-form> <!-- 报告主体 --> <div id="dialogPage"> <div class="dialog-title" align="center">专题报告</div> <div class="row"> <span> {{unit}} </span> <span style="" class="right">时间:{{nowDate | formatdatezhSimple}}</span> </div> <div class="row"> <span>制作人:{{this.producer}}</span> <span class="right">签发人:{{this.issuer}}</span> <div class="line1" style="border-bottom: 2px solid #ff6600;width: 100%; margin: 3px 0;"></div> <div class="line2" style="border-bottom: 8px solid #ff6600;width: 100%;"></div> </div> <div class="row content">{{textarea}}</div> <a href="" id="imgA" title="点击下载"> <div id="downloadImg"></div> </a> </div> <div class="right"> <el-button type="primary" @click="download">导出pdf</el-button> </div> <div id="result" style="height: 300px;"></div> </el-dialog>
js
download() { var element = document.querySelector("#dialogPage") // 这个dom元素是要导出pdf的div容器 var w = element.style.width; // 取得该容器的宽 var h = element.style.height; // 取得该容器的高 var offsetTop = element.offsetHeight; // 取得该容器到文档顶部的距离 var offsetLeft = element.offsetWidth; // 取得该容器到文档最左的距离 var canvas = document.createElement("canvas"); var abs = 0; // var win_i = $(window).width(); // 取得当前可视窗口的宽度(不包含滚动条) var win_i = document.body.offsetWidth; // 取得当前可视窗口的宽度(不包含滚动条) var win_o = window.innerWidth; // 取得当前窗口的宽度(包含滚动条) if (win_o > win_i) { abs = (win_o - win_i) / 2; // 取得滚动条长度的一半 } canvas.width = w * 2; // 将画布宽&&高放大两倍 canvas.height = h * 2; var context = canvas.getContext("2d"); context.scale(2, 2); context.translate(-offsetLeft - abs, -offsetTop); // 这里默认横向没有滚动条的情况,由于offset.left(),有无滚动条的时候存在差值,因而 // translate的时候,要把这个差值去掉 html2canvas(element).then(canvas => { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var 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(); } } } let now = new Date(); // 调用全局过滤器 let date = this.$options.filters.formatdatezhSimple(now); pdf.save(date + ' 专题报告.pdf'); }) }, handleExport1() { this.imgDialogVisible = true; }, openDialog() { let htmlDom = document.querySelector('#centerPark') html2canvas(htmlDom, { allowTaint: false, //允许污染 taintTest: true, //在渲染前测试图片(没整明白有啥用) useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释) background: "#fff", }).then(canvas => { // this.imgDialogVisible = true; let img = document.querySelector('#downloadImg'); if (img.hasChildNodes()) { var childs = img.childNodes; for (var i = childs.length - 1; i >= 0; i--) { img.removeChild(childs[i]); } } const dataImg = new Image() dataImg.style.height = "500px"; dataImg.style.width = "100%"; dataImg.src = canvas.toDataURL('image/png', 1.0); //将图片转为base64, 0-1 表示清晰度,得到图片的base64编码数据 document.querySelector('#downloadImg').appendChild(dataImg); let blob_ = this.dataURLtoBlob(dataImg.src) const alink = document.querySelector("#imgA"); alink.href = window.URL.createObjectURL(blob_); alink.download = "map.png"; // alink.onclick = () => { // canvas.toBlob(function (blob) { // saveAs(blob, 'map.png'); // }); // }; }) }, dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); },
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 实现屏幕截图
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 实现屏幕截图