“我正在参加「掘金·启航计划」”
记录:岗位技能矩阵模块开发中遇到的一些问题,每天都在写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响应将被解释为文本,这不适合下载二进制文件格式,如图像或文档。 当响应作为文本处理时,文件中包含的任何二进制数据都将被翻译成文本字符,而打开该文件的应用程序可能无法识别这些字符。这可能导致文件损坏,无法打开或正确使用。
小结
如此就实现了一下后端返回二进制数据,前端进行导出(下载)的功能!