方法一

需要安装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 });
    },