pdfjs enables PDF preview in VUE-CLI, and disables printing and downloading functions


Official website: PDF.js

Official demo: PDF.js viewer

Installation and use


Project introduction

This article focuses on the files of vue-cli4

  • Create a new pdfjs folder under the public folder, and copy the downloaded web and build into it

Modify source code configuration (Preliminary)

Because pdf JS does not support cross domain file loading. Direct loading will not succeed. The error "file origin doesn't match viewer" will be reported, so the viewer The line of throwing errors in the JS file will be commented out

Project use

Preliminary run demo

Since it is a new framework, you must want to try the effect first. Very simple, put an iframe on the page, and then src equals to viewer The public path of HTML can be directly (pdfjs/* * *).

<iframe src="pdfjs/web/viewer.html" frameborder="0" class="pdf-window"></iframe>

The effect is exactly the same as the official demo.

Formally face the project requirements

I mainly focus on the pdf file stream (base64/ArrayBuffer) returned by the background. Of course, if the background can directly return the pdf address, it can directly (file= the file path returned by the back end'/static/pdfjs/web/viewer.html? File='+ pdfvisiturl).

  • Open viewer HTML, add the following code (note that it should be placed before the pdf.js reference):
<script type="text/javascript">
  var DEFAULT_URL = "";
  var pdfUrl = document.location.search.substring(1);
  if (null == pdfUrl || "" == pdfUrl) {
    var BASE64_MARKER = ';base64,'; //Declare file stream encoding format
    var preFileId = "";
    var pdfAsDataUri = sessionStorage.getItem("_imgUrl"); //Here is the base64 code of the pdf file. I passed Base64 through the session
    var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
    DEFAULT_URL = pdfAsArray;
    //Code conversion
    function convertDataURIToBinary(dataURI) {
      //[RFC2045] stipulates that a line of Base64 cannot exceed 76 characters, and if it exceeds 76 characters, a carriage return line feed character is added. Therefore, you need to remove the line feed character and carriage return character in the base64 field.
      var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
      var newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, '');
      var raw = window.atob(newUrl); //This method cannot be parsed normally in the ie kernel.
      var rawLength = raw.length;
      //Convert to pdf Uint8Array types that can be directly resolved by. JS
      var array = new Uint8Array(new ArrayBuffer(rawLength));
      for (i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i) & 0xff;
      return array;

This code means to read the stored base64 code from the session, and then display it.

  • Modify the fixed path to read pdf file to the incoming variable

Open viewer JS, search defaultUrl and replace with variable

At this point, all the plug-in contents to be modified are modified. Next, we store base64 into the session. Next, there are two ways to display pdf:

  • Jump to viewer HTML.
sessionStorage.setItem('_imgUrl', interfaceUrl)
  • It can be directly embedded in the component page.

sessionStorage.setItem('_imgUrl', interfaceUrl)

this.interfaceUrl = interfaceUrl

<div v-if="interfaceUrl" class="homeLayout__right__pdf">
    <iframe :src="`pdfjs/web/viewer.html`" frameborder="0" class="pdf-window"></iframe>
  • Exhibition


As for disabling printing and downloading, do not comment directly. Just use css to hide it. I'm going to work. As for how to decrypt the encrypted pdf file stream returned from the background, I'll add later

reference resources

Tags: Javascript Vue.js Vue Front-end

Posted by BrandonE97 on Fri, 03 Jun 2022 01:49:20 +0530