【Vue】点击按钮实现上传，下载前端文件

本人不是专业的前端同学，前端水平入门都算不上，只能边摸索，边开发。
记录实现的功能
实现效果：

导入接口按钮上传一份xlsx，并对数据进行处理。
下载模版按钮将前端的文件下载到本地
这里不涉及跟后端的交互

上传

        <el-form-item label="接口配置:" prop="threshold" class="formItem">
          <input v-show="false" ref="fileRef" type="file" @change="uploadFileWithClear($event)">
          <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="exportAPI()"
        >
          导入接口
        </el-button>
        <el-button
          :data = "json_data"
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="downloadTemplate()"
          >
          下载模版
        </el-button>
        </el-form-item>

这样点击button 实际是一个input file
注意：ref="fileRef"
使用xlsx需要安装插件，并且对使用函数进行引用
//npm install xlsx
import { read, utils } from 'xlsx'
核心函数

    exportAPI() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))  //设置触发事件
    } ,
    uploadFileWithClear(event) {
      this.uploadFile(event);
      this.$refs.fileRef.value = "";  //处理完之后这里 清空当前file输入，不然连续点击会发现没有效果
    },
   uploadFile(event) {
      let files = event.target.files
      // 如果没有文件名
      if(files.length<=0){
	   		return ;
      }else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
        this.$message({
          type: "error",
          message: "上传格式不正确，根据模版上传",
        });
	      return ;
      }
      //核心处理代码
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
            const data = ev.target.result;
            const workbook = read(data, {
              type: 'binary'
            });
            const wsname = workbook.SheetNames[0];
            const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
            //TODO 这是自己处理逻辑
            for (var i = 0; i < ws.length; i++) {
              if (!ws[i].hasOwnProperty("domain") || !ws[i].hasOwnProperty("request")) {
                  continue
              }
              this.alarm_configs.push({
                domain:ws[i].domain,
                request:ws[i].request,
                name:ws[i].name,
                editStatus: false,
                editButton: "编辑"
              })
            }
            return 
        } catch (event) {
            return ;
        }
      };
      fileReader.readAsBinaryString(files[0]);
      this.$message({
          type: "success",
          message: "添加成功",
      });
    },

可能有一些处理的比较蠢的地方，还请更正。

下载模版
在网上找的代码。这里比较注意的是alarm_conf_template.xlsx 文件的位置
放在public目录下就可以使用/xxx来使用。

      downloadTemplate() {
        let a = document.createElement("a");
        a.href = "/alarm_conf_template.xlsx";
        a.download = "alarm_conf_template.xlsx";
        a.style.display = "none";
        document.body.appendChild(a);
        a.click();
        a.remove();
        this.$message({
            type: "success",
            message: "下载完成",
        });
    },

标签：files,xlsx,Vue,const,ws,按钮,message,上传,event
来源： https://www.cnblogs.com/zhaosc-haha/p/16532815.html