接口返回文件url前端实现下载修改下载名称 setAttribute

最新推荐文章于 2024-04-23 16:26:38 发布

G_GreenHand

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量211

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44766849/article/details/132234339

版权

 let url = res.data.data.fileUrl
                if (url) {
                  const fileName = '退款统计表单.xlsx';
                  const xhr = new XMLHttpRequest();
                  xhr.open('GET', url, true);  // url 文件的完整地址 http:XXX
                  xhr.responseType = 'blob';
                  xhr.onload = function () {
                    if (xhr.status === 200) {
                      const res = xhr.response;
                      const link = document.createElement('a');
                      link.style.display = 'none';
                      const url = window.URL.createObjectURL(res);
                      link.href = url;
                      link.setAttribute('download', fileName);
                      document.body.appendChild(link);
                      link.click();
                      window.URL.revokeObjectURL(link.href);
                      document.body.removeChild(link);
                    }
                  }
                  xhr.send()
                  this.isDisabled = false
                } else {
                  this.$notify.error({
                    title: "失败",
                    message: '导出失败'
                  });
                  this.isDisabled = false
                }