场景
`vue+xlsx插件实现table表格的导出
前端vue下载文档流的方法(无接口)
前端导出:适用于不分页的表格数据
安装``插件——npm install xlsx file-saver --save
页面引入 ·import FileSaver from 'file-saver·;
·import XLSX from 'xlsx·;
1.table表格导出单独页面的使用(没有封装);
2.table表格导出封装导出方法;
3.导出方法的使用;
概要
需要将页面中的table表格格式及内容直接导出。需要下载xlsx插件。
安装命令:npm install xlsx file-saver --save
1.table表格导出单独页面的使用(没有封装)
` <template>
<div>
<button @click="exportTable">导出表格</button>
<el-table id="Mytable">
<!-- 表格内容
el-table代码中,重点是要绑定id属性
通过document.querySelector('#oIncomTable')可以获取到table元素。 -->
</el-table>
</div>
</template>
<script>
//引用这两个包
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';
export default {
methods: {
exportTable() {
// 通过id获取表格元素
const table = document.getElementById('#Mytable');
//设置导出的内容是否只做解析,不进行格式转换 false:要解析, true:不解析
const xlsxParam = { raw: true };
const ws = XLSX.utils.table_to_sheet(table,xlsxParam);
// 新建工作簿并添加工作表
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 生成Excel文件
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true,type: 'array' });
// 保存文件
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx');
// 以下是字符串转ArrayBuffer之后的保存(不需要就不用加)
//const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
//function s2ab(s) {
// const buf = new ArrayBuffer(s.length);
//const view = new Uint8Array(buf);
// for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
//return buf;
// }
// 保存文件
// saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'table.xlsx');
}
}
};
</script>`
2.table表格导出封装导出方法
*在utils文件中新建文件ExcelUtils.js,进行导出方法的封装
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export function exportToExcel(fliename, dom, that) {
const XLSX = require('xlsx');
console.log('XLSX', XLSX, FileSaver);
// 使用 this.$nextTick 是在dom元素都渲染完成之后再执行document.querySelector('#oIncomTable')
that.$nextTick(function() {
// 设置导出的内容是否只做解析,不进行格式转换 false:要解析, true:不解析
const xlsxParam = { raw: true };
const wb = XLSX.utils.table_to_book(dom, xlsxParam);
// 导出excel文件名
// let fileName = fliename + new Date().getTime() + '.xlsx';
let fileName = fliename + '.xlsx';
const wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array',
});
try {
// 下载保存文件
FileSaver.saveAs(
new Blob([wbout], { type: 'application/octet-stream' }),
fileName
);
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout);
}
}
return wbout;
});
}
3.导出方法的使用
在需要导出的页面中引入导出的封装方法:
import { exportToExcel } from ‘@/utils/ExcelUtils’; //注意路径不要写错
导出方法的使用:
//导出
exportData() {
exportToExcel(‘自定义文件名称’, document.querySelector(‘#Mytable’), this);
},
总结
大功告成,小记一下