tablas - obtener datos de una tabla html javascript

Cómo crear un archivo PDF a partir de una cadena binaria devuelta desde un servicio web utilizando JavaScript

Question

Intento crear un archivo PDF a partir de una secuencia binaria que recibo como respuesta a una solicitud de Ajax.

A través de XmlHttpRequest recibo los siguientes datos:

%PDF-1.4....
.....
....hole data representing the file
....
%% EOF

Lo que intenté hasta ahora fue incrustar mis datos a través de data:uri . Ahora, no tiene nada de malo y funciona bien. Desafortunadamente, no funciona en IE9 y Firefox. Una posible razón podría ser que FF e IE9 tienen sus problemas con este uso del data-uri .

Ahora, estoy buscando cualquier solución que funcione para todos los navegadores. Aquí está mi código:

// responseText encoding 
pdfText = $.base64.decode($.trim(pdfText));

// Now pdfText contains %PDF-1.4 ...... data...... %%EOF

var winlogicalname = "detailPDF";
var winparams = ''dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,''+
            ''resizable,screenX=50,screenY=50,width=850,height=1050'';

var htmlText = ''<embed width=100% height=100%''
                     + '' type="application/pdf"''
                     + '' src="data:application/pdf,''
                     + escape(pdfText)
                     + ''"></embed>''; 

                // Open PDF in new browser window
                var detailWindow = window.open ("", winlogicalname, winparams);
                detailWindow.document.write(htmlText);
                detailWindow.document.close();

Como ya he dicho, funciona bien con Opera y Chrome (Safari no se ha probado). El uso de IE o FF mostrará una nueva ventana en blanco.

¿Hay alguna solución como construir un archivo PDF en un sistema de archivos para permitir que el usuario lo descargue? Necesito la solución que funciona en todos los navegadores, al menos en IE, FF, Opera, Chrome y Safari.

No tengo permiso para editar la implementación del servicio web. Entonces tenía que ser una solución al lado del cliente. ¿Algunas ideas?

Answer 1

¿Hay alguna solución como construir un archivo pdf en el sistema de archivos para permitir que el usuario lo descargue?

Intente establecer responseType of XMLHttpRequest en blob , sustituyendo el atributo download en a elemento para window.open para permitir la descarga de la respuesta de XMLHttpRequest como archivo .pdf

var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true); 
request.responseType = "blob";
request.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // create `objectURL` of `this.response` : `.pdf` as `Blob`
        var file = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        a.href = file;
        a.download = this.response.name || "detailPDF";
        document.body.appendChild(a);
        a.click();
        // remove `a` following `Save As` dialog, 
        // `window` regains `focus`
        window.onfocus = function () {                     
          document.body.removeChild(a)
        }
    };
};
request.send();

Answer 2

Cambié esto:

var htmlText = ''<embed width=100% height=100%''
                 + '' type="application/pdf"''
                 + '' src="data:application/pdf,''
                 + escape(pdfText)
                 + ''"></embed>''; 

a

var htmlText = ''<embed width=100% height=100%''
                 + '' type="application/pdf"''
                 + '' src="data:application/pdf;base64,''
                 + escape(pdfText)
                 + ''"></embed>''; 

Y funcionó para mí.

Answer 3

Detecte el navegador y use Data-URI para Chrome y use PDF.js como se muestra a continuación para otros navegadores.

PDFJS.getDocument(url_of_pdf)
.then(function(pdf) {
    return pdf.getPage(1);
})
.then(function(page) {
    // get a viewport
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    // get or create a canvas
    var canvas = ...;
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // render a page
    page.render({
        canvasContext: canvas.getContext(''2d''),
        viewport: viewport
    });
})
.catch(function(err) {
    // deal with errors here!
});

Answer 4

La respuesta de @alexandre con base64 hace el truco.

La explicación de por qué funciona para IE está aquí

https://en.m.wikipedia.org/wiki/Data_URI_scheme

En el encabezado ''formato'' donde dice

Algunos navegadores (Chrome, Opera, Safari, Firefox) aceptan un pedido no estándar si se proporcionan tanto; base64 como; charset, mientras que Internet Explorer requiere que la especificación del juego de caracteres deba preceder al token de base64.

Answer 5

Me doy cuenta de que esta es una pregunta bastante antigua, pero esta es la solución que se me ocurrió hoy:

doSomethingToRequestData().then(function(downloadedFile) {
  // create a download anchor tag
  var downloadLink      = document.createElement(''a'');
  downloadLink.target   = ''_blank'';
  downloadLink.download = ''name_to_give_saved_file.pdf'';

  // convert downloaded data to a Blob
  var blob = new Blob([downloadedFile.data], { type: ''application/pdf'' });

  // create an object URL from the Blob
  var URL = window.URL || window.webkitURL;
  var downloadUrl = URL.createObjectURL(blob);

  // set object URL as the anchor''s href
  downloadLink.href = downloadUrl;

  // append the anchor to document body
  document.body.append(downloadLink);

  // fire a click event on the anchor
  downloadLink.click();

  // cleanup: remove element and revoke object URL
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
}

Answer 6

Puede usar PDF.js para crear archivos PDF desde javascript ... es fácil de codificar ... ¡espero que esto solucione su duda!

¡Saludos!

Answer 7

Recientemente vi otra pregunta sobre este tema (la transmisión de PDF al iframe utilizando dataurl solo funciona en Chrome ).

Construí pdfs en el futuro y los transmití al navegador. Los estaba creando primero con fdf, luego, con una clase pdf, me escribí a mí mismo, en cada caso el pdf se creó a partir de datos recuperados de un objeto COM basado en un par de parámetros GET pasados ​​a través de la url.

Al mirar tus datos enviados recibidos en la llamada ajax, parece que estás cerca. No he jugado con el código durante un par de años y no lo he documentado tan bien como me hubiera gustado, pero creo que todo lo que debes hacer es establecer el objetivo de un iframe como URL. obtienes el pdf de. Aunque puede que esto no funcione, el archivo que sobresale del archivo PDF también puede tener que salir primero del encabezado de respuesta html.

En pocas palabras, este es el código de salida que utilicé:

//We send to a browser
header(''Content-Type: application/pdf'');
if(headers_sent())
    $this->Error(''Some data has already been output, can/'t send PDF file'');
header(''Content-Length: ''.strlen($this->buffer));
header(''Content-Disposition: inline; filename="''.$name.''"'');
header(''Cache-Control: private, max-age=0, must-revalidate'');
header(''Pragma: public'');
ini_set(''zlib.output_compression'',''0'');
echo $this->buffer;

Entonces, sin ver el texto de respuesta completo de la llamada ajax, no puedo estar seguro de lo que es, aunque me inclino a pensar que el código que emite el pdf que está solicitando solo puede ser equivalente al último. línea en el código anterior. Si se trata de un código sobre el que tienes control, intentaría configurar los encabezados; de esta forma, el navegador puede tratar el texto de respuesta, no tienes que molestarte en hacer algo al respecto.

Simplemente construí una url para el pdf que quería (un cronograma) y luego creé una cadena que representaba el html para un iframe de la sie deseada, id, etc., que usaba la URL construida como es src. Tan pronto como configuré el html interno de un div en la cadena html construida, el navegador pidió el pdf y luego lo mostró cuando se recibió.

function  showPdfTt(studentId)
{
    var url, tgt;
    title = byId("popupTitle");
    title.innerHTML = "Timetable for " + studentId;
    tgt = byId("popupContent");
    url = "pdftimetable.php?";
    url += "id="+studentId;
    url += "&type=Student";
    tgt.innerHTML = "<iframe onload=/"centerElem(byId(''box''))/" src=''"+url+"'' width=/"700px/" height=/"500px/"></iframe>";
}

EDITAR: se olvidó de mencionar: puede enviar archivos PDF binarios de esta manera. Las secuencias que contienen no necesitan ser codificadas en ascii85 o hex. Utilicé Flate en todos los flujos en el pdf y funcionó bien.

Answer 8

Trabajo en PHP y uso una función para decodificar los datos binarios enviados desde el servidor. Extraigo la información de una entrada a un archivo simple.php y veo el archivo a través de mi servidor y todos los navegadores muestran el artefacto en PDF.

<?php
   $data = ''dfjhdfjhdfjhdfjhjhdfjhdfjhdfjhdfdfjhdf==blah...blah...blah..''

   $data = base64_decode($data);
    header("Content-type: application/pdf");
    header("Content-Length:" . strlen($data ));
    header("Content-Disposition: inline; filename=label.pdf");
    print $data;
    exit(1);

?>