vue将表格导出为excel
2018-03-18 19:51 龙恩0707 阅读(3911) 评论(1) 编辑 收藏 举报vue将表格导出为excel
一:在项目中需要安装2个依赖项,如下命令:
npm install --save file-saver xlsx
二:在vue文件中如下使用即可:
<template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <p><button type="button" id="export-table" @click="exportFunc">下载excel文件</button></p> <div id="out-table"> <table> <thead> <tr> <td>ID</td> <td>姓名</td> <td>年龄</td> </tr> </thead> <tbody> <tr> <td>111111</td> <td>我是前端开发</td> <td>今年29岁</td> </tr> </tbody> </table> </div> </div> </template> <script> import FileSaver from 'file-saver'; import XLSX from 'xlsx'; console.log(FileSaver); export default { name: 'helloworld', data () { return { msg: 'Welcome to Your Vue.js App' }; }, methods: { exportFunc: function(e) { // 从表生成工作簿对象 var wb = XLSX.utils.table_to_book(document.getElementById('out-table')); // 得到二进制字符串作为输出 var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }); FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), 'a.xlsx'); }, s2ab: function(s) { var cuf; var i; if (typeof ArrayBuffer !== 'undefined') { cuf = new ArrayBuffer(s.length); var view = new Uint8Array(cuf); for (i = 0; i !== s.length; i++) { view[i] = s.charCodeAt(i) & 0xFF; } return cuf; } else { cuf = new Array(s.length); for (i = 0; i !== s.length; ++i) { cuf[i] = s.charCodeAt(i) & oxFF; } return cuf; } } }, components: { FileSaver, XLSX } }; </script>
注意:table里面中的表头thead中不能使用th标签,否则的话,表头导入不出去到excel文件中,只能使用tr,td这样的。