javascript - playsinline - Descarga blobs localmente usando Safari
video safari html5 (5)
Estoy tratando de encontrar una forma de navegador para almacenar datos localmente en HTML5. He generado una parte de los datos en un Blob ( ver MDN ). Ahora quiero mover este Blob al sistema de archivos real y guardarlo localmente. He encontrado las siguientes formas de lograr esto;
- Utilice el atributo
<a download>
. Esto funciona solo en Chrome actualmente. - Microsoft introduce una función
saveAs
en IE 10 que logrará esto. - Abra la URL de Blob en el navegador y guárdela de esa manera.
Sin embargo, ninguno de estos parece funcionar en Safari. Mientras que (1) funciona en Chrome, (2) en IE y (3) en Firefox, nadie trabaja en Safari 6. El atributo de descarga aún no está implementado y al intentar abrir un blob usando la URL Safari se queja de que las URL comienzan con blob:
no son URL válidas
Hay un buen script que encapsula (1) y (3) llamado FileSaver.js pero que no funciona con la última versión de Safari.
¿Hay alguna manera de guardar Blobs localmente en una forma de navegador cruzado?
¿Has leído este artículo? http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them
En relación con http://caniuse.com/#search=blob , se pueden usar blobs en safari.
Debería crear un servlet que entregue el blob a través de http: // url estándar, para evitar el uso de blob: url. Simplemente haga una solicitud a esa url y construya su blob.
Luego puede guardarlo en su sistema de archivos o almacenamiento local.
Aquí, los datos son los datos del búfer de matriz que provienen de la respuesta mientras se realiza la llamada del resto http en js. Esto funciona en safari, sin embargo, podría haber algún problema en el nombre de archivo, ya que no tiene título.
var binary = '''';
var bytes = new Uint8Array( data );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
var base64 = "data:"+contentType+";base64,"+window.btoa( binary );
var uri = encodeURI(base64);
var anchor = document.createElement(''a'');
document.body.appendChild(anchor);
anchor.href = uri;
anchor.download = fileName;
anchor.click();
document.body.removeChild(anchor);
El nombre del archivo apesta, pero esto me funciona en Safari 8:
window.open(''data:attachment/csv;charset=utf-8,'' + encodeURI(csvString));
ACTUALIZACIÓN: ya no funciona en Safari 9.x
FileSaver.js ha sido actualizado recientemente y funciona en IE10, Safari5 + etc.
Consulte: https://github.com/eligrey/FileSaver.js/#supported-browsers
La única solución que he encontrado es hacer un dato: url en su lugar. Para mí esto se parece a:
window.open("data:image/svg+xml," + encodeURIComponent(currentSVGString));