Receive the pdf file stream returned by the backend to realize the preview on the front end (download and print the search content)

First of all, let’s talk about the requirements in this area: Send the corresponding id parameter to the background to get the relevant pdf file stream as follows:

Since I have never done the pdf preview function, I was dazzled by reading a lot of tutorials on the Internet. At the same time, I also tried a lot of methods .

Among them, the Vue tutorial download plug-in vue-pdf meets my needs according to the document tutorial and also achieves the effect I want, but the project I made is purely natively written by the previous old project, so I still have to look at the official website of pdf.js

Without further ado, just talk about the steps in my process:

①: Go to the official website to download the package https://github.com/mozilla/pdf.js/releases/download/v1.10.88/pdfjs-1.10.88-dist.zip

②: Unzip the package into the project directory

③: modify viewer.js

• var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf' //inside is the path of PDF to delete the variable definition (comment out)

• Find another 2080 lines

  var fileOrigin = new URL(file, window.location.href).origin;
  if (fileOrigin !== viewerOrigin) {
    
    
    throw new Error('file origin does not match viewer\'s');
    }

• change into

   if (file && 'byteLength' in file) {
    
    
      } else{
    
    
        var fileOrigin = new URL(file, window.location.href).origin;
        if (fileOrigin !== viewerOrigin) {
    
    
          throw new Error('file origin does not match viewer\'s');
        }
      }

④: Open viewer.html<script src="viewer.js"></script> and add the following code above:

 <script src="../../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
   // 这里是截取地址栏=后面的参数 可选中其它办法
    function getArgsFromHref(sArgName){
    
    
    //   var sHref=window.location.href;
      var sHref = location.search;
      var args = sHref.split(sArgName+"=");
      var retval = "";
      //args is null
      if(args[0] == sHref){
    
    
        return retval;
      } 
      var retval = args[1];
      return retval;
    }
    
    var url_file=getArgsFromHref("url_file");
    
    var DEFAULT_URL = "";//注意，删除的变量在这里重新定义  
    var PDFData = "";
    $.ajax({
    
    
      type:"post",
      async:false,
      mimeType: 'text/plain;charset=x-user-defined',
      url:url_file,
      success:function(data){
    
    
         PDFData = data;
      }
    });
    
    var rawLength = PDFData.length;
    //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068  
    var array = new Uint8Array(new ArrayBuffer(rawLength));    
    for(i = 0; i < rawLength; i++) {
    
      
      array[i] = PDFData.charCodeAt(i) & 0xff;
    }  
    DEFAULT_URL = array;
    </script>

⑤ call:

The page box that needs to display the pdf document

nests viewer.html with iframe

I request action next in viewer.html:

Page display effect:

Note: Change the default style by yourself to match your own project body (the toolbar reports an error in Chinese : it will only take effect if it is deployed on the server, you can build a server to view it yourself)

Give me a thumbs up~