使用vue上传或下载excel文件

<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);
      }
    };
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值