Vue实现导出功能（无后端配合）

正常导出是后端来做，我们去调用后端接口，会返回给我们文件（前端即：axios请求，设置responseType: 'blob'，然后创建一个a标签，通过window.URL.createObjectURL将blob转为一个路径，为a标签增加download属性，给其一个文件名称，执行click事件即可下载）；但是没有后端的情况下怎么做呢？下面来简单介绍一下：

首先安装两个插件 

npm i file-saver -S
npm i xlsx -S

封装一下 

method.js 

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'// 导出Excel（根据表格当前的数据进行导出）
export function exportExcel1(dom, fileName) {// 前面这五行代码作用就是去掉导出重复的表 就是导出的时候我这边会导出两个一样的表格，可能是因为右侧的fixed导致的，所以在导出的时候要删除掉let tableDom = dom.cloneNode(true)let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")let elTableFixed = tableDom.querySelector(".el-table__fixed")if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);if(elTableFixed) tableDom.removeChild(elTableFixed);let wb = XLSX.utils.table_to_book(tableDom, { raw: true })let wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: true,type: 'array'})try {FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);} catch(e) {console.error(e, wbout, '----->>>')}
}// 导出Excel （根据数据 自定义导出  一般表格会分页展示数据，如果按照上面的方式 只会导出当前页的，如果想导出所有数据 就使用该方法）
export function exportExcel(tableList, fileName) {let tableData = [['故障报警', '设备名称', '故障内容', '系统', '状态', '开始时间', '结束时间']]tableList.forEach(item => {tableData.push([ item.alarm, item.equipname, item.point, item.system, item.status, item.starttime, item.endtime ])})let ws = XLSX.utils.aoa_to_sheet(tableData)let wb = XLSX.utils.book_new()XLSX.utils.book_append_sheet(wb, ws)let wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: true,type: 'array'})try {FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);} catch(e) {console.error(e, wbout, '----->>>')}
}// 暂时没用下面这两个方法（也是可以的）
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
export function sheet2blob(dom, sheetName) {// 前面五行代码作用就是去掉导出重复的表 就是导出的时候我这边会导出两个一样的表格，可能是因为右侧的fixed导致的，所以在导出的时候要删除掉let tableDom = dom.cloneNode(true)let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")let elTableFixed = tableDom.querySelector(".el-table__fixed")if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);if(elTableFixed) tableDom.removeChild(elTableFixed);const sheet = XLSX.utils.table_to_sheet(tableDom);//将一个table对象转换成一个sheet对象sheetName = sheetName || 'sheet1';var workbook = {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] = sheet; // 生成excel的配置项var wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: 'binary'};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"}); // 字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}return blob;
}
export function openDownloadDialog(url, saveName) {if (typeof url == 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 创建blob地址}var aLink = document.createElement('a');aLink.href = url;aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var event;if (window.MouseEvent) event = new MouseEvent('click');else {event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);}aLink.dispatchEvent(event);
}

组件中使用（按需引入） 

导出

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！