方法一
需要安装 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 = $(Windows).width(); // 获得当前可视窗口的宽度 (不包含滚动条)
- var win_i = document.body.offsetWidth; // 获得当前可视窗口的宽度 (不包含滚动条)
- var win_o = Windows.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 = Windows.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 });
- },
来源: http://www.jianshu.com/p/1ce0b4e34d7c