JS implementa la descarga de flujo de archivos Blob

1. Descargar

En JavaScript, puede utilizar el objeto Blob y el método URL.createObjectURL() proporcionados por el navegador para implementar la descarga de secuencias de archivos.
Aquí hay un código de muestra para ayudarlo a comprender cómo implementar la descarga de archivos en streaming en JavaScript:

function downloadFile(data, filename, type) {
    
    
    // 创建 Blob 对象
    const blob = new Blob([data], {
    
     type: type });

    // 判断当前浏览器是否是IE，由于IE是没有download 方法的，需要用msSaveBlob() 或 msSaveOrOpenBlob()
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    
    
        // 兼容IE
        window.navigator.msSaveOrOpenBlob(blob, filename)
    } else {
    
    
        // 创建 URL 对象
        const url = URL.createObjectURL(blob);

        // 创建链接
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;

        // 模拟点击链接进行下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 释放 URL 对象
        URL.revokeObjectURL(url);
    }
}

En este ejemplo, definimos una downloadFile() función que acepta tres parámetros: data, filename ytype

En la función, primero creamos un flujo de datos binarios usando el objeto Blob y luego creamos un objeto URL usando el método URL.createObjectURL() . A continuación, creamos un elemento de enlace y configuramos el atributo href del elemento de enlace en la URL del objeto URL y el atributo download en el nombre del archivo que se guardará. . Finalmente, simulamos hacer clic en el elemento de enlace para iniciar la operación de descarga.

Cuando se completa la descarga, necesitamos liberar el objeto URL para que el navegador pueda recuperar la memoria de este objeto. Esta operación se puede lograr utilizando el método URL.revokeObjectURL().

Nota: utilice window.navigator.msSaveOrOpenBlob o window.navigator.msSaveBlob para procesar objetos Blob en IE
Uso:

1.msSaveOrOpenBlob: proporciona botones para guardar y abrir
2.msSaveBlob: proporciona solo un botón para guardar

2. Solicitud

Cuando utilice la solicitud axios, agregueresponseType: 'blob' parámetro de entrada. Un ejemplo de solicitud es el siguiente:

axios({
    
    
  // 请求头  
  headers: {
    
    
      Content-Type: 'application/json;charset=utf-8'  
  },
  responseType: 'blob', // // `responseType` 表示浏览器将要响应的数据类型,选项有'arraybuffer', 'document', 'json', 'text', 'stream',浏览器专属：'blob',默认是'json'
  method: 'get', // 类型根据实际接口是get还是post
  url: '接口URL',
  params: {
    
    }, // URL参数
});

Debido a que estamos utilizando la descarga de secuencias de archivos, el objeto de respuesta devuelto no es del tipo json y debe ser reemplazado por el tipo blob.< /span>

3. Ejemplo

Tome la descarga de Excel como ejemplo:

axios({
    
    
  headers: {
    
    
    'Content-Type': 'application/json;charset=utf-8'
  },
  responseType: 'blob',
  method: 'get',
  url: '#',
  params: {
    
    }
}).then(res => {
    
    
  downloadFile(res, '文件名称','application/xlsx')
})

Según el método de solicitud, ya sea una solicitud get o una solicitud post, descargar diferentes archivos corresponde a diferentes Blob Escriba, aquí la descarga del archivo Excel usa application/xlsx, si está descargando otros tipos de archivos, cambie a otros tipos.
BlobLos documentos relacionados se pueden ver en el enlace:
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type < /span>