vue里将table（可选列）转excel导出的问题

  • Z时代
  • 2024-03-12
  • 分类：IT

vue里将table（可选列）转excel导出的问题

一开始使用的通用的一种方案，直接将table的所有列转为excel导出是没问题的，代码如下：

        import FileSaver from 'file-saver'
        import XLSX from 'xlsx'
        exportExcel (tableId, fileName) {
            /* generate workbook object from table */
            const table = document.querySelector(`#${tableId}`)
            const fix = document.querySelector('.el-table__fixed');
            let wb;
            if (fix && fix.parentNode == table) {
                wb = XLSX.utils.table_to_book(table.removeChild(fix), { raw: true })
                table.appendChild(fix);
            } else {
                wb = XLSX.utils.table_to_book(table, { raw: true });
            }
            /* get binary string as output */
            const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${fileName}.xlsx`)
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbout)
            }
            return wbout
        }

但是现在有个问题，就是table的某一项是不需要的导出的，比如我们table的最后一列是操作相关的列，比如删除按钮，最后这一列是不需要导出的，怎么在上面的基础上再加入导出时删除某一列的功能呢？大佬们，求教

回答：

const table = document.querySelector(`#${tableId}`).cloneNode(true);
// 然后调用 DOM 接口把不需要的列删了
// ...

还有个更好的方法：渲染一个隐藏的组件，这个组件的表格里不渲染不需要的那一列，然后导出这个组件中的表格就行了。
这个隐藏的组件可以由原来的表格组件修改而来，甚至可以复用。

以上是 vue里将table（可选列）转excel导出的问题 的全部内容， 来源链接： utcz.com/p/935805.html

回到顶部