目录

一、导出excle

1、没有固定列的表格

 2、表格中有固定列的表格(按1中导出，导出数据会重复)

        二、 导出地图图片

一、导出excle

借助以下插件，框架中已存在（其他框架暂未测试，测试后会更新）

"file-saver": "2.0.1",
"script-loader": "0.7.2",
"xlsx": "0.14.1"，

template中：按钮加事件，el-table加id

<el-button @click="exportExcel">Export</el-button>
<el-table id="table" ></el-table>

引入依赖

import FileSaver from "file-saver";
import XLSX from "xlsx";

1、没有固定列的表格

exportExcel() {
  //  .table要导出的是哪一个表格
  var wb = XLSX.utils.table_to_book(document.querySelector("#table"));
  /* get binary string as output */
  var wbout = XLSX.write(wb, {
     bookType: "xlsx",
     bookSST: true,
     type: "array"
   });
   try {
   //  name+'.xlsx'表示导出的excel表格名字
      FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}),"name.xlsx");
    } catch (e) {
       if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
},

 2、表格中有固定列的表格(按1中导出，导出数据会重复)

exportExcel(id) {
  var reportTitle = 'name.xlsx'
  /* generate workbook object from table */
  // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
  var fix = document.querySelector('.el-table__fixed');
  var wb;
  var xlsxParam = {raw: true};//转换成excel时，使用原始的格式
  if (fix) {
    wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix), xlsxParam);
    document.querySelector(id).appendChild(fix);
  } else {
    wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam);
  }
  /* get binary string as output */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], {
        type: 'application/octet-stream'
      }),
      reportTitle
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
},

二、 导出地图图片

实际上是导出固定容器的html，依赖于插件html2canvas

npm install html2canvas --save
import html2canvas from 'html2canvas'

template中，按钮加点击监听，地图容器加ref

<el-button @click="handleDownload">Export</el-button>
<div id="myMap" ref="map" style="width: 100%;height: 80vh"></div>

script中：

handleDownload() {
  html2canvas(this.$refs.map, {
    backgroundColor: '#FFFFFF',
    useCORS: true
  }).then((canvas) => {
    if (navigator.msSaveBlob) { // IE10+
      let blob = canvas.msToBlob();
      return navigator.msSaveBlob(blob, name);
    } else {
      let imageurl = canvas.toDataURL('image/png')
      //这里需要自己选择命名规则
      let imagename = "name"
      this.fileDownload(imageurl, imagename)
    }
  })
},
//下载截屏图片
fileDownload(downloadUrl, downloadName) {
  let aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = downloadUrl;
  aLink.download = `${downloadName}.jpg`;
  // 触发点击-然后移除
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
},

 注：图中标记为我敲代码时改过的地方，这些代码实现了我需要的功能，其原理并未深究，若有不对的地方，欢迎批评指正。