Pero limitado por los navegadores, en muchos casos solo podemos dar un enlace y permitir que los usuarios hagan clic para abrir -> Guardar como. Como por ejemplo el siguiente enlace:
Copie el código de código de la siguiente manera:
<a href="archivo.js">archivo.js</a>
Cuando el usuario hace clic en este enlace, el navegador abrirá y mostrará el contenido del archivo al que apunta el enlace. Obviamente, esto no satisface nuestras necesidades. HTML5 agrega un atributo de descarga a la etiqueta a. Siempre que este atributo esté presente, cuando se hace clic en el enlace, el navegador no abrirá el archivo al que apunta el enlace, sino que lo descargará (actualmente solo es compatible con Chrome, Firefox y). Ópera).
Al descargar, el nombre del enlace se utilizará directamente como nombre del archivo, pero se puede cambiar. Simplemente agregue el nombre del archivo que desea descargar, como por ejemplo: download="not-a-file.js".
Pero esto no es suficiente. El método anterior sólo es adecuado para su uso cuando el archivo está en el servidor. ¿Qué sucede si desea que el navegador descargue el contenido generado por js en el lado del navegador?
De hecho, todavía hay una manera de hacerlo. Creo que mucha gente ha oído hablar de la palabra DataURI. La más común es el src de la imagen, como por ejemplo:
Copie el código de código de la siguiente manera:
<img src="datos:image/gif;base64,R0lGOXXXXX">
La explicación de DataURI se puede mover aquí, no la explicaré aquí.
Entonces, ahora existe una ley a seguir al descargar contenido generado por js. Encapsulado en un método de la siguiente manera:
Copie el código de código de la siguiente manera:
función descargarArchivo(unEnlace, nombre de archivo, contenido){
aLink.download = nombre de archivo;
aLink.href = "datos:texto/sin formato", + contenido;
}
Después de llamar a downloadFile, el usuario hace clic en el enlace para activar la descarga del navegador.
Sin embargo, no es suficiente. El método anterior tiene dos desventajas, lo que provocará la pérdida de muchas chicas perezosas:
Existen restricciones sobre los tipos de archivos que se pueden descargar. ¿Qué debo hacer si quiero descargar las fotos procesadas?
Tienes que hacer clic nuevamente para descargar, lo cual es demasiado problemático.
Para resolver el problema del tipo de archivo, puede usar la nueva API del navegador (URL.createObjectURL) para resolver el problema. URL.createObjectURL generalmente se usa para crear el DataURI de la imagen para mostrar la imagen. y deja que el navegador nos ayude a configurar el tipo de archivo.
El parámetro de URL.createObjectURL es un objeto Archivo o un objeto Blob. El objeto Archivo es el archivo seleccionado mediante entrada [tipo = archivo]. Para obtener una descripción detallada, consulte aquí.
Ahora, solo necesitamos crear un ObjectURL con contenido y asignarlo a un Link para resolver el problema de limitación del tipo de archivo.
La descarga automática de archivos también es bastante sencilla. Puede crear un evento de clic en la interfaz de usuario usted mismo y luego activarlo automáticamente para lograr la descarga automática.
Ahora veamos el código final:
Copie el código de código de la siguiente manera:
función descargarArchivo(nombre de archivo, contenido){
var aLink = document.createElement('a');
var blob = nuevo Blob([contenido]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent sin los dos últimos parámetros informará un error en FF. Gracias a Barret Lee por los comentarios.
aLink.download = nombre de archivo;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
Ahora, tan pronto como se llame a downloadFile, el archivo se descargará automáticamente, ¿no es genial ^_^?
Nota: Actualmente (2014-01), Blob y URL.createObjectURL ya no necesitan agregar prefijos privados en los navegadores estándar, por lo que puede usarlos con confianza ~~ Si está preocupado, puede consultar ¿Puedo usarlo?