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

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

Element  + xlsx 

安装命令  npm install xlsx 

页面引入  import XLSX from 'xlsx'

一、excel表格导入到表格

  
    工具
		
      
        
          
            
              导入数据
            
            {{formName}}
            
          
          
            
              
              
                
              
            
          
        
      
    
  


import XLSX from 'xlsx'
export default {
    data(){
      return {
        // 表格
        fileList:[],
        tableData: [],
        dataName:[],//表格header
        formName:'',//导入的表格名
      }
    },
    created(){
    },
    methods:{
      
      // 导入表格数据
      handleChange(file) {
        const _this = this
        _this.tableData = []
        _this.fileName = file.name;
        _this.formName = file.name;
        const reader = new FileReader();
        //提取excel中文件内容
        reader.readAsArrayBuffer(file.raw);
        reader.onload = function () {
            const buffer = reader.result;
            const bytes = new Uint8Array(buffer);
            const length = bytes.byteLength;
            let binary = "";
            for (let i = 0; i  {
                _this.tableData.push(i);
            });
            _this.dataName = Object.keys(_this.tableData[0]);//获取抬头
        };
      },
      
}

二、表格数据导出成excel

此处参考Vue中如何进行数据导出与Excel导出？_vue导出excel文件-CSDN博客；

中间一定更要记得引xlsx；

这边的数据是固定的，如果想改成动态的，可以自己写循环替代map方法；

  
    导出数据
  


import XLSX from 'xlsx'
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    exportData() {
      const XLSX = require("xlsx");
      const headers = ['姓名', '年龄', '性别']
      const data = this.tableData.map(item => [item.name, item.age, item.gender])
      const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      XLSX.writeFile(workbook, 'data.xlsx')
    }
  }
}