Mi información de contacto
Correo[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
<a href="链接" >下载</a>
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')
2. Agregue el atributo de descarga a la etiqueta a.
<a href="链接" download="文件名" >下载</a>
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.
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));
}
**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)