Descargue archivos entre dominios y modifique los nombres de los archivos

Introducción

El front-end generalmente descarga archivos estáticos utilizando aetiquetas de uso común, especificando downloadatributos y activando descargas.

descargar HTML5
Este atributo indica al navegador que descargue la URL en lugar de navegar hasta ella, por lo que se le pedirá al usuario que la guarde como un archivo local. Si la propiedad tiene un valor, entonces este valor se utilizará como el nombre de archivo precargado durante la descarga y guardado (el nombre de archivo aún se puede cambiar si el usuario lo desea). Esta propiedad no tiene restricciones sobre los valores permitidos, pero / y \ se convierten en guiones bajos. La mayoría de los sistemas de archivos limitan la puntuación en los nombres de los archivos, por lo que los navegadores ajustarán los nombres de los archivos sugeridos en consecuencia.

Nota:
Esta propiedad solo se aplica a las URL de origen.
Aunque la URL HTTP debe tener el mismo origen, puede usar blob: URL y data: URL para facilitar a los usuarios la descarga de contenido generado con JavaScript (como fotografías creadas con una aplicación web de dibujo en línea).
Si al atributo Content-Disposition del encabezado HTTP se le asigna un nombre de archivo diferente de este atributo, el atributo del encabezado HTTP tiene prioridad sobre este atributo.
Si el atributo Content-Disposition del encabezado HTTP está configurado en línea (es decir, Content-Disposition='inline'), Firefox le da prioridad al atributo Content-Dispositiondownload del encabezado HTTP.

Sin embargo, este método tiene un inconveniente: en el caso de recursos entre dominios, downloadlos atributos no funcionarán y se cambiará el nombre del recurso descargado. Entonces, ¿cómo cambiar el nombre de los recursos?

Descarga entre dominios

Podemos crear una nueva solicitud http para descargar recursos de archivos estáticos.

export function downFile(url , filename) {
  axios
    .get(url, {
      responseType: 'blob'  //  注意 responseType 属性需要加上
    })
    .then(async res => {
      console.log(res);
      const data = res.data;
      const bolb = new Blob([data], { type: 'application/pdf' });  // 此处文件类型为pdf
      saveAs(bolb, filename);
    });
}

El responseTypecampo le indica al servicio que devuelva una secuencia de blobs, que podemos usar directamente Blobel objeto para convertir. Después de obtener blobel objeto, puedes adescargar la etiqueta.

descarga del disparador

function saveAs(blob, filename) {
  let aLink = document.createElement('a');
  let evt = document.createEvent('HTMLEvents');
  evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = filename;
  aLink.href = window.URL.createObjectURL(blob);
  aLink.click();
}

Cree una nueva aetiqueta y active manualmente la descarga.

descarga de archivos base64

Si el servidor encapsula la interfaz y devuelve directamente base64una cadena, simplemente conviértala

function  downloadFile(content, fileName) {
      let aLink = document.createElement('a');
      let blob = base64ToBlob('data:application/pdf;base64,' + content, 'pdf');
      let evt = document.createEvent('HTMLEvents');
      evt.initEvent('click', true, true);
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    }
   function  base64ToBlob(base64) {
      return new Promise(resolve => {
        let arr = base64.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        resolve(new Blob([u8arr], { type: mime }));
      });
    }
downloadFile(url, 'filename')