a标签的下载属性以及使用blob格式下载

你眼里有一条星河照耀着我

已于 2023-09-20 15:00:16 修改

阅读量736

点赞数 1

文章标签：前端 javascript html css

于 2023-08-18 10:37:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51986661/article/details/132356551

版权

a标签的下载属性以及使用blob格式下载

正常情况下，我们可以使用a标签的down属性实现下载功能

<a :href="fileUrl" download></a>       // fileUrl为你自己的文件链接

但是服务器端返回的response中，content-type为text/plain，即数据以纯文本形式(text/json/xml/html) 进行编码，其中不含任何控件或格式字符。chrome浏览器会直接打开了该文本。
如果是外部链接，可以尝试配置代理。

一般我们会通过blob格式实现下载功能，避免控制栏显示文本链接

const downLoad = async () => {
    const response = await axios({
      url: fileUrl.value,                                        // 文件地址
      method: 'GET',
      responseType: 'blob', // 必须指定为blob类型才能下载
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', meetingInfo.value.title + ".pdf");
    document.body.appendChild(link);
    link.click();
  }

借鉴https://blog.youkuaiyun.com/u013217071/article/details/124348909文章，可以参考一下