一、导出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);
},

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

vue-element-admin中导出excel和导出地图图片相关推荐

vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
asp.net中使用excel类导出Excel文件，并导出到web客户端中遇到的问题
asp.net中使用excel类导出Excel文件,并导出到web客户端中遇到错误: 检索Com类工厂中CLSID为{000245-0000-0000-C000-000000000046}的组件失败, ...
Vue将页面中Echarts动态图导出Gif动图
Vue将页面中Echarts动态图导出Gif动图首先,准备工作需要三个依赖的js 第一个js采用npm进行安装: npm install html2canvas 第二个js采用下载放入项目中进行使用 ...
《springboot中实现excel表格导出》
<springboot中实现excel表格导出> 简介在Spring Boot中,实现Excel表格导出的方式有很多种,以下是几种常见的方法: 使用Apache POI:Apache P ...
php页面表格导出excel表格数据类型,php页面表格导出excel表格数据类型-php导出excel是不是导出整个表的？可不可以导出指......
php 怎么把数据导出到excel表格昨天项目里有个新需求,客户希望把一些数据能导出成为Excel表格,刚开始用PHP原生输入Excel表格,发现效果不是很理想,于是找到一个比较著名的库:PHPEx ...
js导出EXCEL js导出EXCEL
参考一:http://wenku.baidu.com/view/7b81f3eb6294dd88d0d26b57.html 参考二: js导出EXCEL js导出EXCEL <html> ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
Hutool导出excel带前台Base64图片
Hutool导出excel带前台Base64图片,hutool并没有封装具体方法,需要自己手动插入. @Data public class PicDto {private String chartBa ...
如何把股票数据导出excel？导出股票历史数据到Excel的方法
共享一个可以把股票数据导出Excel的方法,是一个在线下载股票历史数据,目前可以下载A股.港股.美股所有个股的历史数据,数据是Excel的方便分析查看.做表,最主要是免费... 只要两步就能下载: 填 ...

vue-element-admin中导出excel和导出地图图片

一、导出excle

1、没有固定列的表格

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

二、导出地图图片

vue-element-admin中导出excel和导出地图图片相关推荐

最新文章

热门文章

vue-element-admin中导出excel和导出地图图片

一、导出excle

1、没有固定列的表格

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

二、 导出地图图片

vue-element-admin中导出excel和导出地图图片相关推荐

最新文章

热门文章

二、导出地图图片