js 实现纯前端将数据导出excel两种方式

博客参考

vue中将数据导出excel 一、后端导出接口返回字符串格式数据格式 <el-button type="primary" plain @click="Ex">导出</el-button> Ex() { //str=后端导出接口--返回的数据内容 let str = `指标名称,粒度,指标值,设备名称,指标来源,指标时间, 从4G网络切换入5G网络尝试次数 ,,171 ,ceshi ,核心网 ,2020-12-09 13:00:00 , 从4G网络切换入5G网络尝试次数 ,,171 ,ceshi ,核心网 ,2020-12-09 14:00:00 , 从4G网络切换入5G网络尝试次数 ,,171 ,ceshi ,核心网 ,2020-12-09 15:00:00 , 从4G网络切换入5G网络尝试次数 ,,171 ,ceshi ,核心网 ,2020-12-09 16:00:00 , 从4G网络切换入5G网络尝试次数 ,1 ,171 ,ceshi ,核心网 ,2020-12-09 17:00:00 , 从4G网络切换入5G网络尝试次数 ,1 ,171 ,ceshi ,核心网 ,2020-12-09 18:00:00 , 从4G网络切换入5G网络尝试次数 ,1 ,171 ,ceshi ,核心网 ,2020-12-09 19:00:00 , 从4G网络切换入5G网络尝试次数 ,1 ,171 ,ceshi ,核心网 ,2020-12-09 20:00:00 ,`; //encodeURIComponent解决中文乱码 let uri = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(str); //通过创建a标签实现 var link = document.createElement("a"); link.href = uri; //对下载的文件命名 link.download = "json数据表.xls"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }, 二、后端导出接口返回二进制文件流数据格式 /** * 通过post方式导出文件 * @param key 请求定义静态地址 * @param data 请求参数 * @return {Promise<*>} 返回promise对象 */ let postFileExport = (key, data, params, base) => { return Ajax({ method: 'POST', url: UrlConfig[key], responseType: 'blob', data, params, base }); }; //函数封装 /* 页面导出方法: ids:勾选导出，tableData：表格数据， urlKey：请求地址，fileName: 导出文件名 */ async exportEvent(ids, tableData, urlKey, fileName) { console.log("导出", this.exportData) if (!urlKey) return; if (ids.length <= 0 && tableData.length <= 0) { this.$message.warning('没有数据提供导出'); return; } let hasIds = ids.length > 0; if (tableData.length > 0) { this.tableData.loading = true; let result = await postFileExport(urlKey, hasIds ? { ids: JSON.stringify(ids)} : this.exportData); this.tableData.loading = false; if (!!result) { if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(new Blob( [result] , { type: "application/vnd.ms-excel" }, fileName ) , fileName + ".xls") return } let el = document.createElement("a"); document.body.appendChild(el); el.setAttribute('download', fileName + ".xls"); el.href = window.URL.createObjectURL(new Blob([result], { type: "application/vnd.ms-excel" })); el.click(); document.body.removeChild(el); } else { this.$message.error('导出数据错误'); } } }, 页面使用 <el-button type="primary" plain @click="exportExcel">导出</el-button> async getTableData() { this.tableData.loading = true; let _params = { userId: this.userId, kpiname: this.queryParams.kpiname, //指标名称-下拉框选中值 timed: this.queryParams.timed, //粒度-下拉框选中值 userlabel: this.neName, //topo网元名称 }; this.exportData = JSON.parse(JSON.stringify(_params)); let _result = await getDataRequest("COMINFO_PERFLIST", { page: this.pagingData.current, size: this.pagingData.size, fromTime: this.queryParams.timeRange[0], toTime: this.queryParams.timeRange[1], serviceType: this.tagMenu == "全部" ? "" : this.tagMenu, //来源 ..._params, }); this.tableData.loading = false; if (!!_result && _result.code === 200) { this.tableData.data = _result.data.list; this.pagingData.total = _result.data.total; } else { this.$message.error(_result.msg); } }, exportExcel() { this.exportEvent("", this.tableData.data, "COMINFO_PERFEXPORT", "性能列表导出_" + Tool.dateFormat('YYYYMMDDhhmmss')); }, vue中将数据导出excel 一、后端导出接口返回字符串格式数据格式 <el-but