Fichier de téléchargement de fichier Excel d'exportation frontale

Le processus d'exportation des fichiers

Le front-end envoie une demande, le back-end traite le flux de fichiers, et le front-end Blobanalyse et le télécharge

Processus de mise en œuvre:

Requête frontale

Besoin de changer en réponse au type arraybufferoublob

Si vous ne définissez pas le type de réponse, le fichier téléchargé apparaîtra déformé

responseType: 'arraybuffer'

Prenons l' axiosexemple de la bibliothèque de requêtes couramment utilisée

getDemande d'écriture

axios.get(url, {
    
    
  params: form,
  responseType: 'arraybuffer'
  // responseType: 'blob'
})

postDemande d'écriture

axios.post(url, params, {
    
    
  responseType: 'arraybuffer'
  // responseType: 'blob'
})

Le traitement back-end renvoie le flux de fichiers

Le frontal Blobanalyse et télécharge via l' objet

Le nom de fichier et le type de fichier sont recommandés pour utiliser les données renvoyées par le backend, qui seront généralement placées dans l'en-tête de la réponse

Nom du fichier et type d'informations stockées dans content-dispositionetcontent-type

Lorsque le nom du fichier est chinois, le back-end est généralement transcodé et le front-end peut utiliser le decodeURIComponentdécodage

Analyser et télécharger

Selon la structure retournée dans la figure ci-dessus, prenez-la axioscomme exemple, qui resest le paramètre des données renvoyées par le backend une fois la requête réussie.

let filename = decodeURIComponent(
	res.headers['content-disposition'].split(';')[1].split('=')[1]
)
// let filename = '导出表格.xlsx' // 可以, 但不建议直接写文件名
let fileType = decodeURIComponent(res.headers['content-type'])
let blob = new Blob([res.data], {
    
    
    type: fileType
    // type: 'application/vnd.ms-excel' // 特殊情况下直接写文件的MIME类型
})
let url = window.URL.createObjectURL(blob)
// 创建一个临时的url指向blob对象
// 创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
let a = document.createElement('a')
a.href = url
a.download = filename
// 下载
a.click()
// 释放这个临时的对象url
window.URL.revokeObjectURL(url)

注意

1. filename 可以直接赋值一个字符串包含文件后缀名, 例如: ('导出表格.xlsx'), 但建议从响应头取

2. new Blob() 的第一个参数为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers , 不一定是 res.data , 也可能是 res.body 或其它, 具体根据后端的返回来写

3. new Blob() 的第二个参数用于指定将要放入 Blob 中的数据的类型 (MIME) , 大多数情况从响应头取, 但是后端返回 ( content-type: application/octet-stream 是默认的未知的类型, 除非你知道具体是什么类型，否则解析不出来 ) 的时候需要自己手动设置 MIME 类型。 例如: Excel 表需设置成 { type: 'application/vnd.ms-excel' }

Référence de type MIME pour plusieurs types de fichiers cliquez ici