vue 中 接口返回的bas64 根据返回的类型 点击下载 如何实现
时间: 2024-09-13 10:15:39 浏览: 47
在Vue中处理接口返回的Base64编码字符串并实现文件下载功能,可以通过以下步骤进行:
1. 首先,在你的Vue组件中定义一个方法来处理从接口获取的Base64编码字符串。这个字符串通常会包含文件的MIME类型信息。
2. 然后,创建一个Blob对象,并使用Base64字符串和MIME类型初始化。例如,如果你的Base64字符串是图片类型,你可以这样创建Blob对象:
```javascript
const base64Data = "data:image/png;base64,这里是Base64字符串";
const mime = base64Data.match(/:(.*?);/)[1]; // 从Base64字符串中提取MIME类型
const byteString = atob(base64Data.split(',')[1]); // 将Base64字符串转换为二进制数据
const mimeString = mime || 'application/octet-stream';
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], { type: mimeString });
```
3. 最后,你可以使用`URL.createObjectURL`创建一个临时的URL,然后使用`<a>`标签的`href`属性指向这个URL,并使用`download`属性来指定文件名,这样用户点击链接时就可以下载文件了。例如:
```javascript
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'filename.ext'; // 这里设置文件下载时的文件名
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
```
这样,当用户点击触发该方法的按钮或链接时,就会弹出下载窗口,提示用户保存文件。
阅读全文