Archivo de descarga de archivos de Excel de exportación de front-end

El proceso de exportar archivos

El front-end envía una solicitud, el back-end procesa el flujo de archivos y el front-end lo Blobanaliza y descarga

Proceso de implementación:

Solicitud de front-end

Necesita cambiar en respuesta al tipo arraybufferoblob

Si no configura el tipo de respuesta, el archivo descargado se verá distorsionado

responseType: 'arraybuffer'

Tome la biblioteca de solicitudes de uso común axioscomo ejemplo

getSolicitar escritura

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

postSolicitar escritura

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

El procesamiento de back-end devuelve el flujo de archivos

La interfaz Blobanaliza y descarga a través del objeto.

Se recomienda que el nombre y el tipo de archivo utilicen los datos devueltos por el backend, que generalmente se colocarán en el encabezado de respuesta

Nombre de archivo y tipo de información almacenada content-dispositionycontent-type

Cuando el nombre del archivo es chino, el back-end generalmente transcodifica y el front-end puede usar la decodeURIComponentdecodificación

Analizar y descargar

De acuerdo con la estructura devuelta en la figura anterior, tómela axioscomo ejemplo, que reses el parámetro de los datos devueltos por el backend después de que la solicitud sea exitosa.

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' }

Referencia de tipo MIME para varios tipos de archivos, haga clic aquí