Guardar base64 cadena como PDF en el lado del cliente con JavaScript

Así que aquí mi problema: Tengo un archivo pdf como base64 String que obtengo del servidor. Me gustaría utilizar esta cadena para mostrar el PDF directamente en el navegador o darle la opción de "Guardar como ..." al hacer clic en un enlace. Aquí el código que estoy usando:Guardar base64 cadena como PDF en el lado del cliente con JavaScript

<!doctype> 
<html> 
<head> 
    <title>jsPDF</title> 
    <script type="text/javascript" src="../libs/base64.js"></script> 
    <script type="text/javascript" src="../libs/sprintf.js"></script> 
    <script type="text/javascript" src="../jspdf.js"></script> 

     <script type="text/javascript"> 

     function demo1() { 
      jsPDF.init(); 
      jsPDF.addPage(); 
      jsPDF.text(20, 20, 'Hello world!'); 
      jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); 

      // Making Data URI 
      var out = jsPDF.output(); 
      var url = 'data:application/pdf;base64,' + Base64.encode(out); 

      document.location.href = url; 
     } 
    </script> 
</head> 
<body> 

<a href="javascript:demo1()">Run Code</a> 

</body> 
</html>

Funciona bien con Chrome y Safari. Firefox reconoce el pdf pero no lo muestra ya que FF requiere extensiones para estar presentes pero el uri de datos no tiene ninguno en este caso. La razón por la que insisto aquí, si Chrome y Safari consiguen que funcione, entonces tiene que haber una solución para FF e IE

Sé que hay algunas preguntas relevantes para esto, pero no exactamente la exacta y ahora también una un poco viejos. Sé que una solución alternativa sería generar el pdf en el lado del servidor, pero me gustaría generarlo en el lado del cliente.

Por lo tanto, gente inteligente, ¿es posible a través de algunos hacks o complementos de descarga JS adicionales?

Fuente

2012-07-10 owsata

hellow ??? ¿No hay nadie fuera que tenga alguna respuesta a esto ... puede ser John Resig ;-) – owsata

@owsata, el mismo problema aquí! ¡Simplemente abre la ventana! ¿Encontraste una solución a tu problema? Por favor déjanos saber. Gracias –

@FabioMilheiro Nope no encontró nada útil. El resultado final fue que debido a que los navegadores manejan los datos: la idea de la aplicación era diferente, no había mucho que la usara en primer lugar. Entonces último recurso -> envíe un pdf preparado del servidor. – owsata

Usted debe ser capaz de descargar el archivo usando

window.open("data:application/pdf;base64," + Base64.encode(out));

Fuente

2012-07-10 14:51:40

No, Chrome y FF lo descargan directamente pero no asignan una extensión. Safari abre el PDF y lo muestra en el navegador wow. IE abre una nueva pestaña con el título "application/octet-stream" y nada más ... – owsata

Usted puede crear un ancla como el que se mostraron más abajo para descargar el base 64 pdf:

<a download=pdfTitle href=pdfData title='Download pdf document' />

donde pdfData es su pdf codificado en base64 como "data: application/pdf; base64, JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4I Pgk23JMDQ2LB/0 + 2YsZAQzmZk1PSPIEB ... "

Fuente

2014-01-24 15:55:36 Gabriel

Sé que esta pregunta es antigua, pero también quería lograr esto y lo encontré mientras miraba. Para Internet Explorer utilicé código de here para guardar un Blob. Para crear una burbuja de la cadena base64 había muchos resultados en este sitio, así que no es mi código No puedo recordar la fuente específica:

function b64toBlob(b64Data, contentType) { 
    contentType = contentType || ''; 
    var sliceSize = 512; 
    b64Data = b64Data.replace(/^[^,]+,/, ''); 
    b64Data = b64Data.replace(/\s/g, ''); 
    var byteCharacters = window.atob(b64Data); 
    var byteArrays = []; 

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
    } 

    var blob = new Blob(byteArrays, {type: contentType}); 
    return blob;

Utilizando el filesaver vinculado:

if (window.saveAs) { window.saveAs(blob, name); } 
    else { navigator.saveBlob(blob, name); }

Fuente

2015-02-17 10:18:04 Ka0s

Solo funciona en IE> = 10 –

Filesaver falla en Safari también :( – jrhamza

publiqué la solución en este enlace https://stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript/45669785#45669785 que funciona bien en IE, CROMO, FF. Si esta solución te ayuda, intenta votarla –

Guardar base64 cadena como PDF en el lado del cliente con JavaScript

Respuesta

Cuestiones relacionadas