“我正在参加「掘金·启航计划」”
记录:岗位技能矩阵模块开发中遇到的一些问题，每天都在写BUG,写完BUG写补丁......
实现
之前一直用的都是调用接口,直接就会下载,今天遇到一个后端会返回数据,然后前端还需要进行操作！后端返回一堆二进制数据:
具体实现代码如下 :
// 导出的方法
async export() {
try {
// 数据量比较大整个加载动画
const loadingInstance = Loading.service({ text: '数据量较大,请稍等!' })
const res = await 接口... // 调用接口获取数据
const link = document.createElement('a')
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// download="filename" 属性规定被下载的超链接目标。filename规定作为文件名来使用的文本。
link.download = fileName // 下载的文件名
// link(a)是一个dom元素（一个标签）,向body中插入了一个dom(a)元素。
document.body.appendChild(link)
// 创建一个a链接 使用a.click()模拟点击
link.click()
document.body.removeChild(link)
loadingInstance.close()
} catch {
错误处理！
}
},
# 定义文件名
const fileName = `${Date.now()}.xlsx` 后面必须加.xlsx，否则文件导出打开会提示文损坏之类错误....
# Blob构造函数
blob(size,type) Blob构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型
# 样式
如果设置 display:none,将隐藏整个元素,如果您设置 visibility:hidden,元素的内容将不可见，但元素保持原来的位置和大小。
#URL.createObjectURL()
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。该URL可用于指定源 object(blob)的内容。
# removeChild()
removeChild() 方法指定元素的某个指定的子节点。以Node对象返回被删除的节点，如果节点不存在则返回 null。
注意
出现如下错误是因为没有设置响应类型导致的!
// 导出接口
export function <name>(params) {
return request({
url: `......`,
method: 'get',
responseType: 'blob', // 避免数据损坏并确保文件可以按预期使用。
params
})
}
在接口中必须要写responseType: 'blob',如果没有指定可能会导致下载损坏的文件。这是因为在默认情况下，HTTP响应将被解释为文本，这不适合下载二进制文件格式，如图像或文档。 当响应作为文本处理时，文件中包含的任何二进制数据都将被翻译成文本字符，而打开该文件的应用程序可能无法识别这些字符。这可能导致文件损坏，无法打开或正确使用。
小结
如此就实现了一下后端返回二进制数据,前端进行导出(下载)的功能！
