项目是后台管理系统,需求是当用户选择部分数据就导出选中的,如果用户没有选择就默认全部导出。
1、安装插件并引入
/**
* 下载插件
* "xlsx": "^0.18.5"
* "file-saver": "^2.0.5"
*
* 引入插件
* import * as XLSX from 'xlsx'
* import FileSaver from 'file-saver'
*/
2、获取到用户选择的行数据
let testList = ref([])
const handleSelect = (selection) => {
testList.value = selection;
}
element puls的el-table组件用自带的属性,详情可参考element官网。
3、导出数据
const handleExport = () => {
/**
* 点击导出创建一个新的table表格
* 把选中的行循环插入到新创建的table中,最终导出的其实就是新创建的table中的数据
* 这里如果没有选择就默认导出全部,如果有选择就导出部分数据
*/
let newTable = { };
if(testList.value.length) {
newTable = document.createElement('table');
testList.value.forEach(ite => {
let tr = document.createElement('tr');
for(let key in ite) {
let td = document.createElement('td');
td.innerHTML = ite[key];
tr.appendChild(td);
}
newTable.appendChild(tr);
})
} else {
newTable = document.getElementById('table');
}
/**
* 保存格式
* 第一个参数(wb)就是内容,第二个参数是文件相关的配置
*/
let wb = XLSX.utils.table_to_book(newTable, { raw: true });
let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
/**
* FileSaver是常用的浏览器插件,通过Blob对象来传入文件内容
* 第一个参数就是内容,第二个参数是文件相关的配置,例如编码设置成utf-8,最后调用saveAs方法来保存文件即可,第一个参数是Blob对象,第二个参数是文件名
*/
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'file-name.xlsx'); // file-name.xlsx是下载后的文件名,可根据项目需求更换
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout);
}
}