javascript - puede - ¿Cómo mostrar el diálogo de guardar archivo en Safari?

porque safari no puede descargar archivos

Question

Necesito ayuda. Tengo una aplicación angular y al usar DocRaptor quiero generar PDF y guardarlo como archivo. Pero no puedo activar el diálogo para guardar el archivo en Safari con cualquier método que haya encontrado en Stack Overflow. Esos métodos abren el archivo en la pestaña del navegador actual y reemplazan el html del sitio o abren el archivo en una pestaña nueva. Nadie puede mostrar el diálogo. Aquí los ejemplos que ya he intentado usar. Medio ambiente MacOS - EL Capitan. Safari 9.0.3

Solución n. ° 1

var content = ''file content for example'';
var blob = new Blob([ content ], { type : ''text/plain'' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

Ejemplo jsfiddle . Muestra el archivo en la pestaña actual. Reemplaza el sitio. Pero funciona en Chrome.

Solución n. ° 2

<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">

Ejemplo jsfiddle . No funciona en absoluto en Safari. Funciona en Chrome.

Solución n. ° 3

<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>

y

$scope.saveJSON = function () {
            $scope.toJSON = '''';
            $scope.toJSON = angular.toJson($scope.data);
            var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });           
            var downloadLink = angular.element(''<a></a>'');
                        downloadLink.attr(''href'',window.URL.createObjectURL(blob));
                        downloadLink.attr(''download'', ''fileName.json'');
            downloadLink[0].click();
        };

Fragmento de código de ejemplo. Muestra el contenido del archivo en lugar del html del documento.

Solución n. ° 4

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}

Fragmento de código de ejemplo. Reemplace el documento con el contenido del archivo en Safari. Funciona en Chrome.

Y solución similar n . ° 5

function download(text, name, type) {
    var a = document.createElement("a");
    var file = new Blob([text], {type: type});
    a.href = URL.createObjectURL(file);
    a.download = name;
    a.click();
}

Ejemplo jsfiddle . No funciona en absoluto en Safari. Funciona en Chrome.

También he intentado utilizar bibliotecas como: FileSaver : abre el archivo en Safari en lugar de en el documento. Por lo tanto, debe hacer clic en Cmd + S. Ejemplo . Si usamos el tipo ''pplication / octet-stream'', el nombre del archivo será desconocido o habrá un error ''Error al cargar el recurso: Frame load interrumpted''. Problema

Segunda biblioteca Downloadify : no funciona en absoluto en Safari. Problema

Biblioteca angular nw-fileDialog - en lugar de guardar como muestra elegir archivo. Problema

DocRaptor tiene su propio ejemplo con jQuery. Ejemplo con angular en jsfiddle . Funciona en Chrome, pero en Safari el ejemplo no funciona debido a un error con SAMEORIGIN

Se negó a mostrar '' https://docraptor.com/docs '' en un marco porque estableció ''X-Frame-Options'' en ''SAMEORIGIN''.

Pero si lo reproducimos en el servidor y cambiamos la URL en '' https://docraptor.com/docs.pdf '', funciona y abrimos el archivo en una nueva pestaña y automáticamente descargamos el archivo para que no pueda elegir una carpeta y luego de descargar el usuario, vea blanco vacío pestaña de pantalla en el navegador. Si especificamos el formulario target = "_ self" funcionará perfecto, pero la consola tendrá un error "Falló la carga del recurso:".

Apreciaré cualquier ayuda con este problema. Gracias. Saludos.

Answer 1

Idealmente, la Solución # 2 sería la respuesta, pero el atributo de descarga aún no tiene soporte para navegadores cruzados .

Entonces debes usar un <form> para crear la descarga. Como ha notado, el ejemplo jQuery de DocRaptor usa esta técnica.

El error SAMEORIGIN es en realidad porque JSFiddle está ejecutando el código en un iFrame con sus configuraciones de origen. Si ejecuta esto directamente desde su aplicación Angular, no debería tener ningún problema.

Answer 2

Intenta usar el archivo Blob para esto:

// Buffer can be response from XMLHttpRequest/Ajax or your custom Int32 data
function download(buffer, filename) {
  var file = new Blob([buffer], {
    type: ''application/octet-stream'' // Replace your mimeType if known
  });
  var fileReader = new FileReader();

  fileReader.onloadend = function(e) {
    var converted = e.target.result;
    converted.name = filename;
    converted.webkitRelativePath = filename;

    var iframe = document.createElement(''iframe'');
    iframe.style.display = ''none'';
    document.body.appendChild(iframe);
    iframe.src = converted;
  };
  fileReader.onerror = function(e) {
    throw new Error(''Something is wrong with buffer data'');
  };
  fileReader.file = file;
  fileReader.readAsDataURL(file);
}

Básicamente utiliza el buffer de archivos y descarga eso como contenido de un iframe. Asegúrate de enganchar el tipo de mime correcto para que el sistema de seguridad safari analice el tipo de archivo.