vue 前端excel表格导入和导出,Element + xlsx 组件

前端必要导入表格进行数据匹配，并进行表格导出，感谢很多大佬的文章分享，有不对的地方欢迎各人指正。

Element  + xlsx 

安装命令  npm install xlsx 

页面引入  import XLSX from 'xlsx'

一、excel表格导入到表格

1. <template>
2.   <div class="main">
3.     <div class="main_title">工具</div>
4.                 <div class="main_content main_bg">
5.       <div class="table_title" >
6.         <div class="fl left_tbl">
7.           <div>
8.             <el-upload
9.               class="fl upload-demo" action="" ref="upload" accept=".xls,.xlsx"
10.                 :file-list="fileList" :on-change="handleChange" :show-file-list="false" :auto-upload="false">
11.               <el-button type="success">导入数据</el-button>
12.             </el-upload>
13.             <div class="fl filename" >{{formName}}</div>
14.             <div class="cf"></div>
15.           </div>
16.           <div class="left_tbl_1">
17.             <el-table :data="tableData" border style="width: 100%" class="tb-edit" height="450"  @cell-click="clickCell" :row-class-name="rowClass">
18.               <el-table-column label="序号" type="index"  width="50" v-if="tableData.length>0" align="center"></el-table-column>
19.               <template v-for="(item,index) in dataName" v-if="tableData.length>0" align="center">
20.                 <el-table-column :label="item" :prop="item" align="center" :key="index"></el-table-column>
21.               </template>
22.             </el-table>
23.           </div>
24.         </div>
25.       </div>
26.     </div>
27.   </div>
28. </template>
29. <script>
30. import XLSX from 'xlsx'
31. export default {
32.     data(){
33.       return {
34.         // 表格
35.         fileList:[],
36.         tableData: [],
37.         dataName:[],//表格header
38.         formName:'',//导入的表格名
39.       }
40.     },
41.     created(){
43.     },
45.     methods:{
46.       
47.       // 导入表格数据
48.       handleChange(file) {
49.         const _this = this
50.         _this.tableData = []
51.         _this.fileName = file.name;
52.         _this.formName = file.name;
53.         const reader = new FileReader();
54.         //提取excel中文件内容
55.         reader.readAsArrayBuffer(file.raw);
56.         reader.onload = function () {
57.             const buffer = reader.result;
58.             const bytes = new Uint8Array(buffer);
59.             const length = bytes.byteLength;
60.             let binary = "";
61.             for (let i = 0; i < length; i++) {
62.                 binary += String.fromCharCode(bytes[i]);
63.             }
64.             const XLSX = require("xlsx");
65.             const wb = XLSX.read(binary, {
66.                 type: "binary",
67.             });
68.             const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
69.             outdata.forEach((i) => {
70.                 _this.tableData.push(i);
71.             });
72.             _this.dataName = Object.keys(_this.tableData[0]);//获取抬头
73.         };
74.       },
75.       
76. }
77. </script>
78. <style >
80. </style>

复制代码

二、表格数据导出成excel

此处参考Vue中如何进行数据导出与Excel导出？_vue导出excel文件-CSDN博客；
中间一定更要记得引xlsx；
这边的数据是固定的，如果想改成动态的，可以本身写循环更换map方法；

1. <template>
2.   <div>
3.     <button @click="exportData">导出数据</button>
4.   </div>
5. </template>
7. <script>
8. import XLSX from 'xlsx'
10. export default {
11.   data() {
12.     return {
13.       tableData: [
14.         { name: '张三', age: 18, gender: '男' },
15.         { name: '李四', age: 20, gender: '女' },
16.         { name: '王五', age: 22, gender: '男' }
17.       ]
18.     }
19.   },
20.   methods: {
21.     exportData() {
22.       const XLSX = require("xlsx");
23.       const headers = ['姓名', '年龄', '性别']
24.       const data = this.tableData.map(item => [item.name, item.age, item.gender])
25.       const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
26.       const workbook = XLSX.utils.book_new()
27.       XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
28.       XLSX.writeFile(workbook, 'data.xlsx')
29.     }
30.   }
31. }
32. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。