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')    }  }}