使用FileSaver 和XLSX把dom中table的数据导出

2018-12-17  本文已影响0人  sunhuihuibuhui

本方法只能导出页面上已经渲染的表格,因为他是操作dom去查找信息

如何导出json数据参考下面这两个:

原生js乱序导出json为excel https://github.com/sunhuihuibuhui/JavaScript-export-Excel 这个方法导出的表头顺序是随机的不能自己调整

vue使用插件完美导出excel https://github.com/sunhuihuibuhui/vue-Blob-Export2Excel 这个方法导出的表格信息可以自己设置

欢迎star~

1:安装依赖

npm i xlsx file-saver --save

npm i xlsx --save

 npm i script-loader --save-dev

2:引入

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

3:导出的函数如下

exportExcel () {

            var wb = XLSX.utils.table_to_book(document.querySelector('.listOuter'))

            var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })

            try {

                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')

            } catch (e) {

                if (typeof console !== 'undefined') console.log(e, wbout)

            }

            return wbout

}

下图有注释部分

上一篇下一篇

猜你喜欢

热点阅读