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

img


源码:

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);

【以下回答由 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: '...'}部分的内容。

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



【相关推荐】



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

解决了!!!