0

En el servidor, se convierte de bytes[] a string, usando un convertidor file64Bse, ese string no me sirve para mostrar pdf en el html, como si sirve para una imagen gif o png. He usado la etiqueta e pero solo funciona con archivos pdf que estan en mi disco local y los quiero mostrar. Lo que busco hacer es a traves de ese string que viene del servidor, poder mostrar el pdf, ya sea en un nuevo tab o en la misma ventana.

el codigo que tengo es el sgte: <embed src="data:base64,JVBERi0xL....." type="application/pdf" width="100%" height="600px" />

En el src de la etiqueta está en string que fue convertido de bytes a string con un decodificador base64, ese string aparentemente no sirve para mostrar el archivo pdf, qué solución le darian uds si tienen solo estos datos para mostrar un pdf en el browser? He visto ejemplos con etiquetas embed, iframe, object, todos le incluyen el string que representa al archivo y eso es todo, pero yo no logro visualizar de esa manera, solo imprime todo el string en la pantalla.

5
  • ¿Por qué no sirves directamente el PDF como tal, sin pasar por base64?
    – jachguate
    el 28 jul. 2020 a las 18:20
  • Sin código en la pregunta, es complicado dar una respuesta esperada. Revisa esto: es.meta.stackoverflow.com/a/4433/822 Saludos :D
    – fredyfx
    el 28 jul. 2020 a las 18:55
  • @jachguate eso sería retornar los bytes[] desde el servidor y usar esos datos? Estoy averiguando como hacer eso pero todavia no di con la solucion.
    – vrecalde
    el 28 jul. 2020 a las 20:35
  • @fredyfx el codigo seria el sgte: <embed src="data:base64,JVBERi0xL....." type="application/pdf" width="100%" height="600px" /> En el html quiero reproducir el string que representa al pdf, pero no lo convierte.
    – vrecalde
    el 28 jul. 2020 a las 20:37
  • Edita la pregunta, debajo de las etiquetas hay un enlace que dice "editar". Gracias por colaborar con la comunidad :D
    – fredyfx
    el 28 jul. 2020 a las 20:43

3 respuestas 3

3

Hay varias opciones:

embed

<embed
 src="data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G"
 type="application/pdf" width="100%" height="600px"/>

object

<object
 data="data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G"
 type="application/pdf" width="100%" height="600px"></object>

iframe

<iframe
 src="data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G"
 width=100% height=600></iframe>

pdf.js

/*
    https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html
    */
document.addEventListener('DOMContentLoaded', function() {

  // atob() is used to convert base64 encoded PDF to binary-like data.
  // (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
  // Base64_encoding_and_decoding.)
  var pdfData = atob(
    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

  //
  // The workerSrc property shall be specified.
  //
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js';

  // Opening PDF by passing its binary data as a string. It is still preferable
  // to use Uint8Array, but string or array-like structure will work too.
  var loadingTask = pdfjsLib.getDocument({
    data: pdfData,
  });
  loadingTask.promise.then(function(pdf) {
    // Fetch the first page.
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({
        scale: scale,
      });

      // Prepare canvas using PDF page dimensions.
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context.
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
});
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js"></script>

3
  • Disculpen habrá manera de guardar archivos pdf pesado arriba de 10 MB en base64 el 3 oct. 2020 a las 0:24
  • @DanielJiménez con mucha memoria seguramente, dónde lo estarías guardando? tené en cuenta que base64 aumenta el tamaño un 33% ver es.stackoverflow.com/a/175363/81450 el 3 oct. 2020 a las 19:01
  • Pretendo guardarlo en la base de datos, me han sugerido que el archivo PDF lo convierta en un arreglo de bytes, pero no sé cómo convertirlo el 4 oct. 2020 a las 3:20
2

Para descargar el documento:

<a download='documento' href=[base64] title='Descargar' />

Tienes que sustituir [base64] por la cadena que te llega del servidor.

Por otro lado, para mostrar el pdf:

var obj = document.createElement('object'); 
obj.style.width = '100%';
obj.style.height = '842pt';
obj.type = 'application/pdf';
obj.data = 'data:application/pdf;base64,' + [base64];
document.body.appendChild(obj);

Igualmente [base64] es el codigo base64 que te llega del servidor.

1
  • Muchas gracias, tu respuesta ha solucionado el problema. He usado el codigo que muestra el pdf, funciona perfectamente.
    – vrecalde
    el 29 jul. 2020 a las 14:14
1

Daniel, para pasar a binario un archivo, al menos en vb.net, uso la siguiente función:

Dim fup As Byte()
...
fup = IOIO(FileUpload1)
...
    Public Function IOIO(Fu1 As FileUpload)
            Dim ib(Upl.PostedFile.InputStream.Length) As Byte
            Upl.PostedFile.InputStream.Read(ib, 0, ib.Length)
            Return ib
    End Function

Luego lo inserto a la base de datos como cualquier otro dato. Considera que el campo en SQL debe ser varbinary(MAX)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.