美文网首页
使用FileSaver 和XLSX把dom中table的数据导出

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

作者: sunhuihuibuhui | 来源:发表于2018-12-17 10:58 被阅读0次

    本方法只能导出页面上已经渲染的表格,因为他是操作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

    }

    下图有注释部分

    相关文章

      网友评论

          本文标题:使用FileSaver 和XLSX把dom中table的数据导出

          本文链接:https://www.haomeiwen.com/subject/cijqkqtx.html