Vue导出表格数据

项目是后台管理系统，需求是当用户选择部分数据就导出选中的，如果用户没有选择就默认全部导出。

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);
    }
}