美文网首页
vue中导出表格数据

vue中导出表格数据

作者: sxfshdf | 来源:发表于2019-07-18 13:34 被阅读0次

    项目中使用了 element-UI ,需要导出表格中的数据,主要用到了两个依赖:xlsx ,file-saver 。
    相关git : https://github.com/SheetJS/js-xlsxhttps://github.com/eligrey/FileSaver.js

    1. 安装依赖
    npm install --save xlsx file-saver
    
    1. 组件中引入
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    
    1. 添加一个方法
    exportExcel () {
          //在导出的过程中发现数字的格式发生了变化,可以通过添加参数解决 
          var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
         // 需要导出的table的DOM节点 
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam)
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
        // sheetjs 导出的文件名,可以根据需要修改
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
             return wbout
         },
    
    1. 执行方法就可以得到表格对应的数据。

    相关文章

      网友评论

          本文标题:vue中导出表格数据

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