开启我的实习总结之旅--------vue导出excel表格的步骤

版权声明：张刻骨原创总结 https://blog.csdn.net/zhangkegu/article/details/85095186

今年秋天步入大四的我终于在2018年11月5号光荣的被录入东软，作为助理前端开发工程师开启了我的实习生涯，到今天2018年12月19号，已经一个半月了，这段时间我把自己工作中遇到的问题和解决方法都零零碎碎的记在本子上了.现在，当前项目我负责的部分已经有了眉目，是时候该把内阁应该叫做 技术博客 的东西搞一搞了。

第一个总结：vue导出文件为excel表格的步骤

1. 在有表格需要被导出的vue组件页面中引入插件：

   import FileSaver from 'file-saver'

   import XLSX from 'xlsx'

   
2. 在script的method方法中写导出表格的方法函数：

   // 导出excel

   exportExcel () {

   /* 通过id从表生成工作簿对象 */ 

   var wb = XLSX.utils.table_to_book(document.querySelector('#out-table-mfgw'))

   /* 获取二进制字符串作为输出 */

   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

   },

3. 将方法绑定在导出按钮上：<el-button @click="exportExcel" size="mini" id="add">导出</el-button>
4. 给表格绑定id标识，让导出表格的方法可以通过id获取到要导出的表格：

效果图：点击导出按钮后弹出本地的文件导出框，文件名是在方法中写的文件名和格式

 

温馨提示：

我，作为一个神奇的喵系女孩，虽然反射弧稍微迟缓的长那么一点点，但，我必定是一只不容置疑的程序媛大佬！

你可以嘲笑我技术菜，但，你必须告诉我哪里错了，为什么？

安静的等待本媛的下一篇实习总结吧！