vue+element 导出表格

// 安装
npm install --save xlsx file-saver

// 组件里引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

// 方法
     export2excel () {
         /* '#export2excel '关联导出的dom节点  */
         var wb = XLSX.utils.table_to_book(document.querySelector('#export2excel'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '表名.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },

注意:不要使用el-table的fixed属性来让某一列固定 !elementui的实现方式是:创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。所以导出整个el-table 就会将两个div内的table都导出,导致数据重复

发布了11 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_38652744/article/details/104145883