Vue下载模板文件

有两种方法
1.直接将文件放在public文件夹下
然后在需要下载模板文件的地方定义一个方法,比如

handleDownload() {
  downloadHandle() {
      let xhr = new XMLHttpRequest();
      //get后边是public文件夹下需要下载的模板的文件名
      xhr.open("get", `/template2.xlsx`, true)
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(this.response);
          downloadElement.href = href;
          //这个也是文件名
          downloadElement.download = "template2.xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      };
      xhr.send();
    },

2.将文件放在后端,然后前端调用接口进行下载
比如存放模板文件的接口是/file/downloadExcel,GET请求,参数为res和文件名

  • 我们先在api文件夹下请求一下接口
  getDownloadExcel () {
    return this.$axios({
      url: '/file/downloadExcel',
      method: 'GET',
      responseType: 'blob'
    })
  }
  • 然后配置一下请求方法
    handleDownload: function () {
      FileApi.getDownloadExcel().then((data) => {
        downloadFile(data, '月份重点工作明细.xls')
      })
    }
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张居然的博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值