笔者遇到该问题的基本思路为:
1、首先将base64格式转化为binary(二进制)格式
2、然后使用Javascript原生方法,将二进制文件下载下来
具体代码如下:
// 首先写一个函数,用来将base64数据转为binary数据
base64ToBinary(data) {
const a = window.atob(data)
const len = a.length
const bytes = new Uint8Array(len)
for (let i = 0; i < len; i++) {
bytes[i] = a.charCodeAt(i)
}
return bytes
},
downloadFilesApi() {
// 然后将数据用原生JS来处理,实现对二进制文件的下载
// 如:下面有一个接口,将请求回来的数据进行处理
downloadFiles({ fileId: '1234567890' }).then((res) => {
// ↑ 获取到base64数据的接口,该接口至少返回两个参数,一个是base64的数据,名为base,另一个则是返回过来的文件名,名为fileName
const binaryData = this.base64ToBinary(res.data.base)
// ↑ 将获取到的base64数据,通过我们刚才定义的函数,处理成二进制文件
const blob = new Blob([binaryData],{type:"application/msword"})
// ↑ Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
// ↑ 其中参数type可以设置文件格式,此处笔者想下载的是MS Office的doc格式文件
const downlink = document.createElement('a')
// ↑ 创建一个 a 标签
downlink.href = URL.createObjectURL(blob)
// ↑ 让 a 标签的href属性等于blob
downlink.download = res.data.fileName
// ↑ 设置下载下来的文件名,所以此处后端必须返回两个参数
downlink.click()
// ↑ 让这个 a 标签自动点击
})
}
// 由此,将文件可以下载到本地进行查看或者操作
完整代码为:
<template>
<div class="substation">
<el-button @click="downloadFilesApi">文件下载</el-button>
</div>
</template>
<script>
import { downloadFiles } from "@/api/index.js";
export default {
mounted() {
},
computed: {},
methods: {
// 首先写一个函数,用来将base64数据转为binary数据
base64ToBinary(data) {
const a = window.atob(data)
const len = a.length
const bytes = new Uint8Array(len)
for (let i = 0; i < len; i++) {
bytes[i] = a.charCodeAt(i)
}
return bytes
},
downloadFilesApi() {
// 然后将数据用原生JS来处理,实现对二进制文件的下载
// 如:下面有一个接口,将请求回来的数据进行处理
downloadFiles({ fileId: '1234567890' }).then((res) => {
// ↑ 获取到base64数据的接口,该接口至少返回两个参数,一个是base64的数据,名为base,另一个则是返回过来的文件名,名为fileName
const binaryData = this.base64ToBinary(res.data.base)
// ↑ 将获取到的base64数据,通过我们刚才定义的函数,处理成二进制文件
const blob = new Blob([binaryData], { type: "application/msword" })
// ↑ Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
// ↑ 其中参数type可以设置文件格式,此处笔者想下载的是MS Office的doc格式文件
const downlink = document.createElement('a')
// ↑ 创建一个 a 标签
downlink.href = URL.createObjectURL(blob)
// ↑ 让 a 标签的href属性等于blob
downlink.download = res.data.fileName
// ↑ 设置下载下来的文件名,所以此处后端必须返回两个参数
downlink.click()
// ↑ 让这个 a 标签自动点击
})
}
// 由此,将文件可以下载到本地进行查看或者操作
},
};
</script>