Con el desarrollo de la tecnología front-end, cada vez más escenarios comerciales requieren que el front-end maneje las descargas de archivos. Entre los muchos métodos, la descarga a través del atributo de descarga de la etiqueta <a> es un método común y relativamente simple.
La etiqueta <a> convencional implementa el salto de enlace a través de href. Si solo desea descargar el archivo en lugar de saltar a la vista previa, la mejor manera es agregar el atributo download en la etiqueta <a> , y la operación de descarga se puede realizar fácilmente. .
download es un nuevo atributo de la etiqueta <a> en HTML5. Este atributo forzará que se active la operación de descarga, indicando al navegador que descargue la URL en lugar de navegar hasta ella y solicitando al usuario que la guarde como un archivo local. Por ejemplo:
<a href=result.png descargar>descargar</a>
Si falta el atributo download , al hacer clic en descargar se cambiará directamente a la imagen de vista previa. Cuando se agregue download , se activará la descarga de la imagen.
La compatibilidad actual del atributo download se muestra en caniuse:
Se puede ver que la mayoría de los navegadores convencionales básicamente admiten el atributo download , y el rendimiento de IE es tan impresionante como siempre. Actualmente, muchos sistemas Windows todavía usan IE, lo cual también es algo que muchas empresas deben considerar. Este problema de compatibilidad limita la aplicación más amplia de download .
Frente a algunos escenarios comerciales de descarga de contenido dinámico, es decir, las direcciones de recursos como imágenes no son fijas (como las imágenes generadas por algunas herramientas de dibujo en línea), el uso exclusivo de HTML no puede satisfacer las necesidades. Para satisfacer diferentes descargas de URL, se puede implementar un método para activar dinámicamente descargas de URL a través de JS.
descarga de función (href, nombre de archivo ='') { const a = document.createElement('a') a.download = nombre de archivo a.href = href document.body.appendChild(a) a.click() a.remove() } Cabe señalar que appendChild y remove realizadas en el <a> creado en el código son principalmente para compatibilidad con el navegador FireFox. Al llamar a este método en el navegador FireFox, si no agrega la etiqueta <a> creada. el cuerpo, haga clic en El enlace no hará nada y activará una descarga, lo cual no es el caso en Chrome.
El método anterior puede realizar la descarga de recursos del mismo origen. Pero en muchos escenarios, también es necesario procesar recursos entre dominios. Desafortunadamente, el atributo download actualmente solo se aplica a URL del mismo origen . Es decir, si la dirección del recurso que se descargará es de dominio cruzado, el atributo download no será válido y al hacer clic en el enlace se mostrará una vista previa de navegación.
Prueba: haga clic para descargar, el resultado es solo una vista previa y la imagen no se puede descargar.
Nota: Chrome 65 anteriormente admitía el atributo download para activar descargas de archivos entre dominios. Después de eso, siguió estrictamente la política del mismo origen y ya no podía activar la descarga de recursos entre dominios a través del atributo download . FireFox no ha admitido download de recursos entre dominios.
El atributo download no solo puede activar descargas, sino que también puede especificar el nombre del archivo de descarga:
<a href=test.png descargar=joker.png>Descargar</a>
Si el sufijo del archivo descargado es consistente con el archivo fuente, puede configurar el nombre de archivo predeterminado:
<a href=test.png descargar=joker>Descargar</a>
Una vez, el autor encontró un problema y provocó la descarga de recursos entre dominios a través de la etiqueta <a> . El código es básicamente el mismo que el método de descarga mencionado anteriormente, excepto que el lugar donde se establece download es ligeramente diferente:
a.setAttribute(descargar, verdadero)
Como resultado, ocurrió la siguiente situación en la versión anterior del navegador Chrome.
El nombre del archivo de descarga se vuelve true . Obviamente, el navegador lee el valor del atributo download como el nombre del archivo.
Después del análisis, los problemas anteriores se deben principalmente a:
1. En primer lugar, download no debe establecerse en true . El valor del atributo de download es diferente de disabled y está directamente relacionado con el nombre del archivo. Y para este método de descarga receptivo de front-end y back-end, el atributo download no es necesario.
2. Las primeras versiones de Chrome no solo admitían el atributo download de los recursos entre dominios, sino que también restablecían los nombres de los archivos de los recursos entre dominios mediante download , por lo que ocurrió la situación anterior.
El escenario empresarial en el que el front-end y el back-end cooperan para completar la descarga del archivo generalmente se implementa mediante el back-end configurando Content-Disposition en el encabezado de respuesta.
En el escenario HTTP, el primer parámetro de Content-Disposition está en línea (el valor predeterminado, que indica que el cuerpo del mensaje en la respuesta se mostrará como parte de la página o como página completa), o adjunto (lo que significa que el cuerpo del mensaje debe descargarse en el archivo local. La mayoría de los navegadores presentarán un cuadro de diálogo para guardar como, completando previamente el valor del nombre del archivo con el nombre del archivo descargado).
Si se establece Content-Disposition en el encabezado de respuesta y el front-end también agrega el atributo download a la etiqueta <a> del enlace correspondiente, entonces las reglas de nomenclatura en este momento son:
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.
Después de las pruebas, se descubrió que cuando Content-Disposition en el encabezado HTTP no está vacía:
En el navegador Chrome, no importa si el primer parámetro de Content-Disposition en el encabezado HTTP está configurado como adjunto o en línea , download no puede restablecer el nombre del archivo siempre que el nombre del archivo esté configurado. Por el contrario, cuando el nombre del archivo está vacío, el valor del atributo download se establecerá en el nombre del archivo. En el navegador FireFox, el navegador solo leerá el valor del nombre de archivo de Content-Disposition . Si el nombre del archivo está vacío, se tomará el nombre del archivo fuente. En este momento, download no puede restablecer el nombre del archivo de todos modos.
Para resumir: si la información Content-Disposition no está configurada en el encabezado de respuesta (por ejemplo, la URL del mismo origen que generalmente ubica directamente el recurso), el atributo download puede restablecer el nombre del archivo. Si el backend ha establecido el nombre del archivo en el campo Content-Disposition , prevalecerá el valor del nombre del archivo.
¿Qué debo hacer si aún quiero restablecer el nombre del archivo cuando el nombre del archivo se configuró en el backend?
Blob: URL También hay una introducción al atributo download :
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).
Blob (objeto binario grande) es un objeto binario grande. No lo desconocemos. Algunas bases de datos utilizan Blob para representar el tipo de campo que almacena archivos binarios. La interfaz de Archivo también se basa en Blob, hereda las funciones de Blob y las extiende para admitir archivos en el sistema del usuario. Los objetos Blob se crean utilizando el constructor Blob:
Blob(blobPartes[, opciones])
var debug = {hola: mundo};var blob = new Blob([JSON.stringify(debug, null, 2)], {tipo: 'aplicación/json'}); Si necesita descargar algún archivo de texto simple o de cadena JS, puede convertir la información de texto en una secuencia binaria de blob, generar una URL de blob y usar el atributo download para completar la descarga.
const downloadText = (texto, nombre de archivo = '') { const a = document.createElement('a') a.download = nombre de archivo const blob = new Blob([texto], {tipo: 'texto/plain'}) // texto se refiere al texto o contenido de cadena que debe descargarse a.href = window.URL.createObjectURL(blob) // Se generará una cadena URL similar a blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf document.body.appendChild(a) a.click() a.remove()}¿Cuál es la diferencia entre esta URL Blob y la URL HTTP común?
Blob URL/Object URL es un pseudoprotocolo que permite utilizar objetos Blob y File como fuentes de URL, como imágenes y enlaces de descarga de datos binarios.
El navegador crea una referencia especial al objeto Blob o Archivo internamente a través de URL.createObjectURL() . La URL del Blob generada solo se puede usar en una única instancia del navegador y en la misma sesión, y este objeto URL se usará cuando el objeto Blob o Archivo se realice internamente a través de URL.createObjectURL(). La página sale. Liberado por el navegador.
Por lo tanto, la URL de Blob no puede apuntar a un recurso del servidor y no puede abrirla en otras páginas. Al mismo tiempo, debido a las diferencias en los formatos de codificación, las URL de Blob ocupan menos recursos de espacio y funcionan mejor que las URL de datos.
Los blobs proporcionan una característica muy útil para el desarrollo web: la creación de URL de blobs. Encapsule los datos binarios en un objeto Blob y luego use URL.createObjectURL() para generar una URL de Blob. Dado que la URL de Blob en sí es una URL del mismo origen, puede usar esta URL con download para resolver el problema de la descarga y el nombre. recursos entre dominios.
Blob y Fetch pueden resolver el problema de los nombres de archivos y dominios cruzados: use fetch para obtener recursos entre dominios, devuelva un objeto blob y genere una URL de blob, y active la descarga con el atributo download de la etiqueta <a> . El código es el siguiente:
función descargar(href, nombre de archivo = '') { const a = document.createElement('a') a.download = nombre de archivo a.href = href document.body.appendChild(a) a.click() a.remove() }función descargarArchivo(url, nombre de archivo='') { fetch(url, { encabezados: nuevos encabezados ({ Origen: ubicación.origin, }), modo: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) descargar(blobUrl, nombre de archivo) window.URL.revokeObjectURL(blobUrl) })}En este punto, haga clic en Descargar nuevamente y las imágenes entre dominios se podrán descargar al área local normalmente.
Cabe señalar que el servidor donde se encuentran los recursos entre dominios debe configurarse con información Access-Control-Allow-Origin ; de lo contrario, obtendrá un error entre dominios en mayúsculas. Ejemplo de configuración de encabezado:
//Permitir que cualquier nombre de dominio acceda al header('Access-Control-Allow-Origin: *'); //Especifique el nombre de dominio para acceder al header('Access-Control-Allow-Origin: https://h5.ele.me ');Todavía existen algunas deficiencias en este método, por ejemplo, el navegador limitará el tamaño de los datos de Blob a no más de 500 M y también será insuficiente en términos de rendimiento.
Resumir Actualmente, existen muchos métodos de descarga en la interfaz y download es uno de los más simples. Sin embargo, una consideración cuidadosa de algunas de estas características también puede revelar mucha información útil. download está estrechamente relacionada con las funciones del navegador. En la actualidad, la compatibilidad de este atributo también es un gran problema. Sin embargo, incluso los funcionarios de Microsoft imploran a los usuarios que no utilicen más IE. Creo que el problema de compatibilidad de download seguirá mejorando. futuro, y las perspectivas de aplicación serán cada vez más populares.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.