后台项目中excel导入、excel导出

excel导出

调用导出接口------接收二进制流blob------下载文件

在axios中配置responseTyle为blob

下载 npm install file-saver 插件实现下载blob文件

file-saver中有一个saveAs方法来进行导出

  import FileSaver from "file-saver";

  excelRee() {
      let res = getExcel();
      FileSaver.saveAs(res, "员工信息表.xlsx");
    }

excel导入

1.创建导入模态框组件

2.通过.sync修饰符来进行弹框的显示隐藏

3.点击下载模板，实现下载导入模板。axios中的responseType为blob 二进制，用的也是file-saver中的saveAs方法来进行下载

4.使用const data =new FormData() ----- 在Vue.js中使用FormData对象可以实现表单数据的处理和提交。

5.点击上传触发input的file属性打开文件夹，进行选择文件上传，监听文件的上传来完成上传。调用导入接口完成上传成功。并关闭模态框。

async excelRee() {
      let res = await getExcel();
      FileSaver.saveAs(res, "员工信息表.xlsx");
    },
    addinp() {
      this.$refs["excel-upload-input"].click();
    },
    async setImout(event) {
      console.log(event.target.files);
      let files = event.target.files;
      if (files.length > 0) {
        let Form = new FormData()
        Form.append('file',files[0])
        await setExcel(Form)
        this.$emit('addList')
        this.$message.success('批入导入成功！')
        this.$emit('update:showExcelDialog', false)
      }
    },
    async excelRee() {
      let res = await settemplate();
      FileSaver.saveAs(res, '员工导入模版')
    }