Cómo descargar archivos front-end

2024-07-12

Método 1: descarga directa con una etiqueta

<a href="链接" >下载</a>
1

Un enlace de archivo (generalmente un archivo en el servidor). Este enlace generalmente se ingresa en la barra de direcciones para obtener una vista previa, no para descargar un archivo adjunto.

Si desea cambiarlo a una descarga de archivos adjuntos, puede elegir uno de los dos métodos siguientes:
1. Procesamiento de backend, agregue un encabezado de respuesta al backend

res.setHeader('Content-Dispostion', 'attachment', 'name.pdf')

1
2

2. Agregue el atributo de descarga a la etiqueta a.

<a href="链接" download="文件名" >下载</a>
1

Desventajas del método uno:

Desventajas: cuando se utiliza la etiqueta a para descargar un archivo en JavaScript, la descarga del navegador se activa directamente a través del evento de clic de la etiqueta a. El encabezado de la solicitud no se puede configurar porque se trata de una solicitud GET simple. Si la descarga de este archivo requiere llevar un token, entonces la etiqueta a no será efectiva (la etiqueta a no puede llevar el token) y se convertirá en una vista previa.
Solución: la etiqueta a puede transportar cookies, por lo que existe otra solución. Antes de descargar el archivo, envíe una solicitud para obtener un token temporal y transferirlo a través de la cookie. La descarga de la etiqueta a es una descarga de transmisión, que realizará los archivos del servidor. como agua corriente. Se almacena en el disco local, por lo que la descarga se puede ver directamente y el archivo no se almacenará en caché en el navegador.

Método de título dos: utilice XMLHttpRequest o solicitud Fetch API.

Escriba un método para descargar (esencialmente, todavía use la etiqueta a para descargar)
Este método puede ser una solicitud ajax, que puede llevar un token y luego convertir el archivo del servidor solicitado en un blob, crear una etiqueta para descargar, crear un elemento de enlace virtual y simular un clic para descargar. Este método ocupará el hilo frontal.


import fetch from 'isomorphic-fetch';
const exportFile = (url, options) => {
  const projectId = sessionStorage.getItem(PROJECT_ID);
  const downLoadURL = projectId ? BATCH_ACTION_URL_PREFIX.V2 : BATCH_ACTION_URL_PREFIX.V1;
  const defaultOptions = {
    credentials: 'same-origin',
  };
  const newOptions = { ...defaultOptions, ...options };
  if (
    newOptions.method === 'POST' ||
    newOptions.method === 'PUT' ||
    newOptions.method === 'DELETE'
  ) {
    const projectId = sessionStorage.getItem(PROJECT_ID);
    const appId = sessionStorage.getItem(APP_ID);
    const shopId = sessionStorage.getItem(SHOP_ID);
    const params = {};
    projectId && Object.assign(params, { projectId });
    appId && Object.assign(params, { appId });
    shopId && Object.assign(params, { shopId });
    newOptions.body = { ...newOptions.body, ...params };
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };
    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers,
      };
    }
  }
  const token = window.localStorage.getItem(TOKEN);
  if (token) {
    newOptions.headers = {
      'X-Authorization': `Bearer ${token}`,
      ...newOptions.headers,
    };
  }
  const lang = localStorage.getItem(LOCALE_KEY);
  if (lang) {
    newOptions.headers = {
      'Accept-Language': lang,
      ...newOptions.headers,
    };
  }
  const requestURL = `${downLoadURL}/${url}`;
  return request(requestURL, newOptions).then(res => {
    let filename;
    if (res.headers) {
      filename = (
        res.headers.get('Content-Disposition') || res.headers.get('content-disposition')
      ).split('attachment;filename=')[1];
    }
    if (res.blob) {
      res.blob().then(blob => {
        var alink = document.createElement('a');
        alink.style.display = 'none';
        alink.target = '_blank';
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          // 兼容IE/Edge
          window.navigator.msSaveOrOpenBlob(blob, filename);
        } else {
          alink.href = window.URL.createObjectURL(blob);
          alink.download = filename;
        }
        document.body.appendChild(alink);
        alink.click();
        URL.revokeObjectURL(alink.href); // 释放URL 对象
        document.body.removeChild(alink);
      });
      return res;
    } else {
      if (res.code === 0) {
        return res;
      } else {
        message.warning(res.message);
      }
    }
  });
};

export default exportFile;


export default function request(url: string, options: Object) {
  const defaultOptions = {
    credentials: 'same-origin',
  };
  const newOptions = { ...defaultOptions, ...options };
  if (
    newOptions.method === 'POST' ||
    newOptions.method === 'PUT' ||
    newOptions.method === 'DELETE' ||
    newOptions.method === 'PATCH'
  ) {
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };
      newOptions.body = JSON.stringify(newOptions.body);
    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers,
      };
    }
  }

  return fetch(url, newOptions).then(response => checkStatus(response, url, options));
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

Desventajas del método dos:

**Si el archivo es pequeño, estará bien. Si el archivo es grande, hará clic para descargar, pero no habrá respuesta. La descarga aparecerá después de unos minutos. Este tiempo de espera es para convertir el archivo. el lado del servidor en un blob (res.blob () Tomó mucho tiempo) antes de que se llevara a cabo la descarga en streaming de la etiqueta a (solo aquí comenzó a aparecer en la página el reflejo interactivo de la descarga)

Compartir tecnología