Pdf.js: How to display ("data:application/pdf;base64," + pdfData) in Viewer.html using PDF.js

Created on 18 Apr 2017 · 11Comments · Source: mozilla/pdf.js

Link to PDF file (or attach file here):

Configuration:

Web browser and its version: Chrome
Operating system and its version: Windows 7
PDF.js version: 2.0
Is an extension:

Steps to reproduce the problem:

I am getting PDF bytes which I am converting to Convert.ToBase64String(PDFBytesData);
The value I am getting something like this shown below
("JVBERi0xLjUKJVBERi0xLjUK..........."; // Base64 String from response shortened)

Queries:

Please tell me how to bind this base64 string in (/pdf.js-master/web/viewer.html).
How to pass parameter with base64string something like this as shown below:

iframe.src = "data:application/pdf;base64," + pdfbytesData + '#search=' + $('#hidden-searchKey').val().trim() + "&phrase=true";

What is the expected behavior? (add screenshot)
I am getting empty Viewer.html. The PDF is not getting loaded with base64 string.
What went wrong? (add screenshot)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

Source

AshwinShriwas

Most helpful comment

Yes it supports base64,
1.Set var DEFAULT_URL = ''; in viewer.js
2.Convert base64 to Uint array
`pdfData = base64ToUint8Array(base64);

function base64ToUint8Array(base64) {
var raw = atob(base64);
var uint8Array = new Uint8Array(raw.length);
for (var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
}

});`

3.Open by
PDFViewerApplication.open(pdfData);

ftc95 on 25 Oct 2018

👍4

All 11 comments

Refer to https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-specify-a-different-pdf-in-the-default-viewer for the answer regarding base64 strings. There is also an example at https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html. Closing as answered.

timvandermeij on 18 Apr 2017

I guess you didn't get what i exactly want. I want to load base64string in Viewer.html .

AshwinShriwas on 19 Apr 2017

The viewer is not designed with that in mind. It is specific for the usage in Firefox (and extensions), so if you want that, you'll have to implement that functionality in the viewer yourself (using the examples as reference).

timvandermeij on 19 Apr 2017

👍1

@timvandermeij can it support chinese?today i have use pdf.js in the same way,but my preview result is blank where there is chinese.the under is my code,do you know why myresult is like this,thanks.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' base64 example</title>
</head>
<body>

<h1>'Hello, world!' example</h1>

<canvas id="the-canvas" style="border:1px  solid black"></canvas>

<!--
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
-->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.487/pdf.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.487/pdf.min.js"></script>

<script id="script">
  // 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');
  var pdfData = atob(
    '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\nEW/16RUeqglGxxdazu8J1X4uzIuYDL0KfVSO5L97XgKPCmVuZHN0cmVhbQplbmRvYmoKMSAwIG9i\nago8PC9Hcm91cDw8L1R5cGUvR3JvdXAvQ1MvRGV2aWNlUkdCL1MvVHJhbnNwYXJlbmN5Pj4vUGFy\nZW50IDUgMCBSL0NvbnRlbnRzIDQgMCBSL1R5cGUvUGFnZS9SZXNvdXJjZXM8PC9Qcm9jU2V0IFsv\nUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXS9Db2xvclNwYWNlPDwvQ1MvRGV2aWNl\nUkdCPj4vRm9udDw8L0YxIDIgMCBSL0YyIDMgMCBSPj4+Pi9NZWRpYUJveFswIDAgNTk1IDg0Ml0v\nUm90YXRlIDkwPj4KZW5kb2JqCjYgMCBvYmoKWzEgMCBSL1hZWiAwIDYwNSAwXQplbmRvYmoKMiAw\nIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EvVHlwZS9Gb250L0VuY29kaW5nL1dpbkFuc2lFbmNv\nZGluZy9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjcgMCBvYmoKPDwvRm9udEJCb3ggWy0yNSAtMjU0\nIDEwMDAgODgwXS9DYXBIZWlnaHQgODgwL1N0eWxlPDwvUGFub3NlKAEFAgIEAAAAAAAAACk+Pi9U\neXBlL0ZvbnREZXNjcmlwdG9yL1N0ZW1WIDkzL0Rlc2NlbnQgLTEyMC9GbGFncyA2L0ZvbnROYW1l\nL1NUU29uZy1MaWdodC9Bc2NlbnQgODgwL0l0YWxpY0FuZ2xlIDA+PgplbmRvYmoKOCAwIG9iago8\nPC9CYXNlRm9udC9TVFNvbmctTGlnaHQvQ0lEU3lzdGVtSW5mbzw8L09yZGVyaW5nKEdCMSkvUmVn\naXN0cnkoQWRvYmUpL1N1cHBsZW1lbnQgND4+L1R5cGUvRm9udC9TdWJ0eXBlL0NJREZvbnRUeXBl\nMC9Gb250RGVzY3JpcHRvciA3IDAgUi9EVyAxMDAwPj4KZW5kb2JqCjMgMCBvYmoKPDwvRGVzY2Vu\nZGFudEZvbnRzWzggMCBSXS9CYXNlRm9udC9TVFNvbmctTGlnaHQtVW5pR0ItVUNTMi1IL1R5cGUv\nRm9udC9FbmNvZGluZy9VbmlHQi1VQ1MyLUgvU3VidHlwZS9UeXBlMD4+CmVuZG9iago1IDAgb2Jq\nCjw8L0lUWFQoMi4xLjcpL1R5cGUvUGFnZXMvQ291bnQgMS9LaWRzWzEgMCBSXT4+CmVuZG9iago5\nIDAgb2JqCjw8L05hbWVzWyhKUl9QQUdFX0FOQ0hPUl8wXzEpIDYgMCBSXT4+CmVuZG9iagoxMCAw\nIG9iago8PC9EZXN0cyA5IDAgUj4+CmVuZG9iagoxMSAwIG9iago8PC9OYW1lcyAxMCAwIFIvVHlw\nZS9DYXRhbG9nL1ZpZXdlclByZWZlcmVuY2VzPDwvUHJpbnRTY2FsaW5nL0FwcERlZmF1bHQ+Pi9Q\nYWdlcyA1IDAgUj4+CmVuZG9iagoxMiAwIG9iago8PC9DcmVhdG9yKEphc3BlclJlcG9ydHMgTGli\ncmFyeSB2ZXJzaW9uIDUuNi4wKS9Qcm9kdWNlcihpVGV4dCAyLjEuNyBieSAxVDNYVCkvTW9kRGF0\nZShEOjIwMTcxMjI5MTE0OTE0KzA4JzAwJykvQ3JlYXRpb25EYXRlKEQ6MjAxNzEyMjkxMTQ5MTQr\nMDgnMDAnKT4+CmVuZG9iagp4cmVmCjAgMTMKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAxODc1\nIDAwMDAwIG4gCjAwMDAwMDIxNjMgMDAwMDAgbiAKMDAwMDAwMjYwNSAwMDAwMCBuIAowMDAwMDAw\nMDE1IDAwMDAwIG4gCjAwMDAwMDI3MjkgMDAwMDAgbiAKMDAwMDAwMjEyOCAwMDAwMCBuIAowMDAw\nMDAyMjUxIDAwMDAwIG4gCjAwMDAwMDI0NDIgMDAwMDAgbiAKMDAwMDAwMjc5MiAwMDAwMCBuIAow\nMDAwMDAyODQ2IDAwMDAwIG4gCjAwMDAwMDI4NzkgMDAwMDAgbiAKMDAwMDAwMjk4NCAwMDAwMCBu\nIAp0cmFpbGVyCjw8L1Jvb3QgMTEgMCBSL0lEIFs8NzM3YjNiYTEyZTQ3ZjE4MDdlYjE1NDA1NjMw\nMDQyYWI+PDRiMzVlN2ZlOWU0YTM4YWU3ZDJiY2E1MTgzNmQ2NWZmPl0vSW5mbyAxMiAwIFIvU2l6\nZSAxMz4+CnN0YXJ0eHJlZgozMTUyCiUlRU9GCg=='
  );

  //
  // The workerSrc property shall be specified.
  //
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.487/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.
  pdfjsLib.getDocument({data: pdfData}).then(function getPdfHelloWorld(pdf) {
    // Fetch the first page.
    pdf.getPage(1).then(function getPageHelloWorld(page) {
      var scale = 1.5;
      var viewport = page.getViewport(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);
    });
  });
</script>

<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
  document.getElementById('code').textContent =
    document.getElementById('script').text;
</script>
</body>
</html>

kakaluote444 on 10 Apr 2018

The viewer is not designed with that in mind. It is specific for the usage in Firefox (and extensions), so if you want that, you'll have to implement that functionality in the viewer yourself (using the examples as reference).

Are you saying that viewer.html is not intended to be used as a container for binary PDF data, and that it's only purpose is to be used as a lousy plugin? According to the pdf.js documentation, as crappy and as incomplete as it is, (as far as API docs go) provides a small demo on how to use the viewer with a static PDF file. At this point, I will believe anything I read about pdf.js. Its API documentation completely fails to provide coding usage for rendering a binary PDF in viewer.html, among other things. I just want to be crystal clear about your answer, because if I cannot use viewer.html for a binary PDF then I am not going to waste another minute trying to figure out pdf.js viewer\binary method. Thanks.

capegreg on 19 Sep 2018

I cannot use viewer.html for a binary PDF

@capegreg there is no such thing as a "binary PDF". If you want to display base64 encoded string you need to decode it yourself, since only few browsers can decode it. The base64 encoding and decoding is very inefficient operation (for servers and client) -- we don't believe supporting it will be beneficial for PDF.js.

iframe.src = "data:application/pdf;base64," + pdfbytesData +

Keep in mind that there is a limit in some browsers on length of URL, and this out of control of PDF.js

yurydelendik on 19 Sep 2018

👍1

I cannot use viewer.html for a binary PDF

@capegreg there is no such thing as a "binary PDF". If you want to display base64 encoded string you need to decode it yourself, since only few browsers can decode it. The base64 encoding and decoding is very inefficient operation (for servers and client) -- we don't believe supporting it will be beneficial for PDF.js.

iframe.src = "data:application/pdf;base64," + pdfbytesData +

Keep in mind that there is a limit in some browsers on length of URL, and this out of control of PDF.js

Thanks yurydelendik. I am decoding it. I just need to know how to implement the viewer.html. My binary pdf is currently rendered in a Canvas element, but I guess that's not supported with viewer.html. I suspect that all I need to do is assign the pdfData to the iframe src, as shown in your iframe.src example.

// data is already decoded
var pdfData = data;
// get my iframe document and set the src
iframe.src = "data:application/pdf;base64," + pdfData;

// don't need part this anymore
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
var scale = 0.9;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('trimCanvas');
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
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});

capegreg on 19 Sep 2018

Yes it supports base64,
1.Set var DEFAULT_URL = ''; in viewer.js
2.Convert base64 to Uint array
`pdfData = base64ToUint8Array(base64);

});`

3.Open by
PDFViewerApplication.open(pdfData);

ftc95 on 25 Oct 2018

👍4

Yes it supports base64,
1.Set var DEFAULT_URL = ''; in viewer.js
2.Convert base64 to Uint array
`pdfData = base64ToUint8Array(base64);

function base64ToUint8Array(base64) {
var raw = atob(base64);
var uint8Array = new Uint8Array(raw.length);
for (var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
}

});`

3.Open by
PDFViewerApplication.open(pdfData);

it works well for the pc and android , but comes to ios, it cant't be totally showed on the ios browser. I can't resolve it ！！！！！！！！！！！！

Newbeetree on 27 Feb 2019

iframe.src = "data:application/pdf;base64," + pdfbytesData +

Keep in mind that there is a limit in some browsers on length of URL, and this out of control of PDF.js

This is not supported by Edge! Sample: https://stackblitz.com/edit/typescript-pf9kxx?file=index.html

This is actually the reason, I want to use pdf.js. To display inlined pdf data....

StefanKern on 8 Apr 2019

Just for the record: pdf.js is able to display PDF files encoded as base64 strings. Maybe the problem of @kakaluote444 is that the string itself was buggy. You one-line base64 string isn't really base64. It contains carriage returns (\n), line feeds (\a), and forward slashes (/).