Vue无后端配合实现导出功能的示例代码
作者:会说法语的猪
这篇文章主要为大家详细介绍了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" }); // 字符串转ArrayBuffer function 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); }
组件中使用(按需引入)
<el-button icon="el-icon-download" @click="downloadTpl()" size="small">导出</el-button> <el-table id="myTable" :data="dataList" size="medium" border @selection-change="selectionChangeHandle" v-loading="loading" class="table" > <!-- ... --> </el-table>
import { exportExcel, sheet2blob, openDownloadDialog } from './method' export default { methods: { // 导出 exportExcel() { exportExcel(document.getElementById('myTable'), '故障及报警.xlsx') //这个只需要 XLSX 库 应该也是可以的,我这边暂时没用 // openDownloadDialog(sheet2blob(document.getElementById('myTable')), '故障及警.xlsx') } } }
以上就是Vue无后端配合实现导出功能的示例代码的详细内容,更多关于Vue导出功能的资料请关注脚本之家其它相关文章!