Base64 preview pdf online

The pdf.js download address is http://mozilla.github.io/pdf.js/ It is
recommended to download it over the wall, but I cannot download it from the company website.

Insert picture description here

Download the stable version, you can also use cnd

At this point, you can directly open the local pdf file.
Note, however, that files such as pdf will cross domains, so they must be placed on the server to be previewed.

Open the web/viewer.html file directly from the local

Insert picture description here

Put it on the server is http://mozilla.github.io/pdf.js/web/viewer.html , and no error will be reported

What we need to solve at this time is how to pass base64 into this plug-in and display it online

1. Add code in web/viewer.html

<script type="text/javascript">
  var DEFAULT_URL = "";
  var pdfUrl = document.location.search.substring(1);
  if (null == pdfUrl || "" == pdfUrl) {
    
    
    var BASE64_MARKER = ';base64,'; //声明文件流编码格式
    var preFileId = "";
    var pdfAsDataUri = sessionStorage.getItem("_imgUrl"); //这里就是pdf文件的base64码，我是通过session传递base64的
    var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
    DEFAULT_URL = pdfAsArray;
    //编码转换
    function convertDataURIToBinary(dataURI) {
    
    
      //[RFC2045]中有规定：Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉。
      var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
      var newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, '');
      var raw = window.atob(newUrl); //这个方法在ie内核下无法正常解析。
      var rawLength = raw.length;
      //转换成pdf.js能直接解析的Uint8Array类型
      var array = new Uint8Array(new ArrayBuffer(rawLength));
      for (i = 0; i < rawLength; i++) {
    
    
        array[i] = raw.charCodeAt(i) & 0xff;
      }
      return array;
    }
  }
</script>

Note: before adding to pdf.js

The meaning of this code is to read the stored base64 code from the session, and then display

2. Modify the fixed path of reading the pdf file to the incoming variable.
Open viewer.js, search for defaultUrl and replace it with the variable

Note that different versions have different modification methods. The version I use is: pdfjs-2.2.228-dist

Insert picture description here

At this time, the content of the plug-in to be modified is all modified, and then we store base64 in the session and jump to viewer.html

3. New main page to save base64

Insert picture description here
The code is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
  var PDFData
  = "data:application/pdf;base64,*************";
  sessionStorage.setItem("_imgUrl", PDFData);
  // pageToUrl("./pdfjs/web/viewer",true);
  window.location.href = './web/viewer.html'
</script>
</html>

Note: ***** is the base64 code obtained

Insert picture description here

As shown in the figure, open index.html directly

Insert picture description here
At this time, the pdf frame has appeared, but the words and content are not. The error is reported because of the cross-domain error when obtaining the converted font file. At this time, you only need to put the file on the server.

As shown below

Insert picture description here

The presentation is complete!

4. Finally, use the interface to obtain the hard-coded base64 encoding, so I won't go into details here.

Base64 preview pdf online

Guess you like