使用vue上传或下载excel文件

最新推荐文章于 2025-01-14 15:59:14 发布

qq_37017397

最新推荐文章于 2025-01-14 15:59:14 发布

阅读量1.7w

点赞数

分类专栏：前端文章标签：导入或下载excel文件

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的Excel文件导入和导出功能的示例。该示例展示了如何通过前端代码触发文件选择框来让用户上传Excel文件，并在后端进行处理。同时，也介绍了如何下载预设的Excel模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form>
  <input type="file" name="fileup" id="uploadEventFile" v-on:change="fileChange($event)" style="display:none" />
</form>
<button v-on:click="importData($event)" class="imptbtn">导入excel</button>
<button v-on:click="download()" class="imptbtn">下载</button>

// 导入excel文件
importData: function(event) {
      event.preventDefault();
      $("#uploadEventFile").trigger("click")
    },
    fileChange: function (el) {
      el.preventDefault();//取消默认行为
      let vm = this
      let uploadEventFile = $("#uploadEventFile").val()
      this.file = el.target.files[0]
      if (uploadEventFile == '') {
       alert("请择excel,再上传");
      } else if (uploadEventFile.lastIndexOf(".xls") > 0 || uploadEventFile.lastIndexOf(".XLS") > 0) {
        let formData = new FormData();
        // 向 formData 对象中添加文件
        formData.append('file',this.file);
        let config = {
        // 一定要定义头
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        // url为对应的后端接口
        vm.$http.post(url,formData,config).then(function (response) {
         alert('上传成功')
        })
      } else {
        alert("只能上传excel文件");
      }
    },
    // 下载文件
    download: function(){
       axios({
            method: "get",
            url: "xxx",
            responseType: "arraybuffer"
          })
          .then(
            function(response) {
              let filename = "poiImport.xlsx";
              this.fileDownload(response.data, filename);
            }.bind(this)
          )
          .catch(
            function(error) {
              alert("网络请求出错");
            }.bind(this)
          );
    },
    fileDownload = function (data, fileName) {
      let blob = new Blob([data], {
        type: "application/octet-stream"
      });
      let filename = fileName || "filename.xls";
      if (typeof window.navigator.msSaveBlob !== "undefined") {
        window.navigator.msSaveBlob(blob, filename);
      } else {
        var blobURL = window.URL.createObjectURL(blob);
        var tempLink = document.createElement("a");
        tempLink.style.display = "none";
        tempLink.href = blobURL;
        tempLink.setAttribute("download", filename);
        if (typeof tempLink.download === "undefined") {
          tempLink.setAttribute("target", "_blank");
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
      }
    };