Ok, digamos que tengo los datos de un documento almacenado en algún lugar, vamos a tomar arbitrariamente este pdf.

Problema #1. Lo que quiero hacer es hacer una llamada AJAX a esta URL (porque tengo que pasar algunos encabezados de autenticación y es la cruz de dominio). Luego de tomar los datos devueltos, crear un url blob para ello, añadir un iFrame a la DOM, y de dirigir el src a la nota de la url.

Actualmente mi código es este:

$.ajax({
  url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf'
}).done(function(data){
   var file = new Blob([data], {type:'application/pdf'}),
       url = URL.createObjectURL(file),
       _iFrame = document.createElement('iframe');
      _iFrame.setAttribute('src', url);
      _iFrame.setAttribute('style', 'visibility:hidden;');
      $('#someDiv').append(_iFrame);
});

Por desgracia, yo estoy haciendo un ‘Error al Procesar PDF’ en el iFrame.

Problema #2. Me gustaría que este resultado en un archivo de descarga del sistema. No está seguro de cómo garantizar esto, habida cuenta de que el PDF será, naturalmente, acaba de mostrar en el iFrame.

  • la cadena de datos comienza así: %PDF-1.5 %���� 2504 0 obj <</Linearized 1/L 3722399/O 2506/E 388168/N 36/T 3720768/H [ 462 773]>> endobj 2511 0 obj <</DecodeParms<</Columns 3/Predictor 12>>/Filter/FlateDecode/ID[<F9EFEA8C46FA46DBA17E65AF85B66228><EF984B2A947E994D999C77E6D2021030>]/Index[2504 10]/Info 2503 0 R/Length 47/Prev 3720769/Root 2505 0 R/Size 2514/Type/XRef/W[1 2 0]>>stream h�bbdb9�����]�x?abP|...
  • Sólo para tu INFORMACIÓN a nadie. Acabó completamente de trabajo en torno a este tema, ya que no parece posible. Terminé de servir los archivos temporalmente durante 10s, señalando con un iframe a su arbitraria de la url, y la eliminación de ellos después de la descarga (sin autenticación distintos de las cookies del navegador).
InformationsquelleAutor Eric H. | 2013-03-17

3 Comentarios

  1. 38

    jQuery.ajax no es actualmente compatible con los blobs, ver este informe de error #7248 que se cierra como wontfix.

    Sin embargo, es fácil hacer XHR de blob sin jQuery:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true);
    xhr.responseType = 'blob';
    
    xhr.onload = function(e) {
      if (this.status == 200) {
        //Note: .response instead of .responseText
        var blob = new Blob([this.response], {type: 'application/pdf'}),
            url = URL.createObjectURL(blob),
            _iFrame = document.createElement('iframe');
    
        _iFrame.setAttribute('src', url);
        _iFrame.setAttribute('style', 'visibility:hidden;');
        $('#someDiv').append(_iFrame)        
      }
    };
    
    xhr.send();

    Copiado descaradamente de HTML5rocks.

    Si jQuery no soporta el tipo Blob, podría ser tan simple como:

    $.ajax({
      url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf',
      dataType:'blob'
    })...
    • Gracias, funciona. Pero, ¿y si no sé el tipo «application/pdf» en la previa? ¿Puedo utilizar el tipo MIME de la respuesta?
    • ¿Cómo puedo hacer que funcione usando $recursos angular?
    • Sí, usted puede utilizar su tipo mime de la respuesta. Tenga en cuenta sin embargo, que esta solución le no le permiten al archivo el nombre que la gente termina de descargar. Ella siempre va a ser un poco desagradable hash o algo.
    • puede alguien sugerir cómo mostrar pdf, sin necesidad de terceros API.. utilizando XMLhttpReuqest o filereader. cuando estamos seleccionando archivo pdf a partir de fileupload de control en html
  2. 0

    He usado @Ciantic respuesta a adaptar mi respuesta. He evitado el uso de iframe obj y el usuario puede descargar el archivo directamente desde la página.

    var link = 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf';
    $("body").addClass("loading"); //adding the loading spinner class
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET',link,true);
    xhr.responseType = 'blob';
    
            xhr.onload = function(e){
                     if (this.status == 200) {
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(new Blob([this.response], {type: 'application/pdf'}));
                        a.href = url;
                        a.download = 'report.pdf';
                        a.click();
                        window.URL.revokeObjectURL(url);
                        $('body').removeClass("loading"); //removing the loading spinner class
                      }else{
                          $('body').removeClass("loading") //removing the loading spinner class
                          console.log(this.status);
                          alert('Download failed...!  Please Try again!!!');
                      }
                };
                xhr.send();
  3. 0
    var src_url = your url here;
    var contentDisposition = 'AlwaysInline';
    var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

    Haciendo esto, usted será capaz de ver pdf en lugar de la descarga,

    Encabezado ContentDisposition debe ser ‘AlwaysInline’, a continuación, sólo se muestra el archivo en lugar de descargarlo.

Dejar respuesta

Please enter your comment!
Please enter your name here