后端返回了url地址，在vue中转化为了blob类型，下载之后无法加载，只能用window.open（）打开，该怎么解决呀

Question

源码:

const url = URL.createObjectURL(new Blob([certString], {type : 'application/pdf;charset=UTF-8'}));

          const fileName = '下载证书';

          const elink = document.createElement('a');

          elink.style.display = 'none';

          elink.href = url;

          elink.setAttribute('download', fileName);

          // elink.download = fileName;

          document.body.appendChild(elink);

          elink.click();

          document.body.removeChild(elink);

          URL.revokeObjectURL(url);

Answer 1

【以下回答由 GPT 生成】

我可以帮你解决这个问题。在Vue中，你可以使用axios来获取后端返回的URL地址，并将其转换为Blob类型以进行下载和加载。

首先，你需要安装axios。在终端中运行以下命令：

npm install axios --save

接下来，在你的Vue组件中引入axios：

import axios from 'axios';

然后，在需要下载和加载的地方，使用axios发送GET请求获取URL地址：

axios.get('/your-backend-url')
  .then(response => {
    const url = URL.createObjectURL(new Blob([response.data], {type: 'application/pdf;charset=UTF-8'}));
    const fileName = '下载证书';

    const elink = document.createElement('a');
    elink.style.display = 'none';
    elink.href = url;
    elink.setAttribute('download', fileName);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
    URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error(error);
  });

在这段代码中，我们使用axios的GET方法发送了一个HTTP请求，获取到了后端返回的数据response.data。然后，我们将数据转换为Blob类型，并创建一个URL地址。接下来，将URL地址绑定到一个创建的<a>元素的href属性上，并设置download属性来指定下载时的文件名。最后，触发click事件来触发下载，然后移除创建的<a>元素，并释放URL对象。

这样，你就可以在Vue中将后端返回的URL地址转换为Blob类型，以便下载后能够加载了。

PS：根据您提供的代码和问题描述，我假设您的后端返回的是PDF文件数据，所以我在Blob的构造函数中指定了{type: 'application/pdf;charset=UTF-8'}。如果你的文件类型是其他类型，你需要相应地更改{type: '...'}部分的内容。

希望以上解决方案对你有帮助。如果你还有任何疑问，请随时提问。

【相关推荐】

• 这篇博客: 前端常用的【文件下载操作1】前端配合后端进行文件下载==＞根据url下载 ==＞根据blob下载中的 （1）方法一：window.open 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^