バックエンドから返された PDF ファイルストリームを受信して、フロントエンドでプレビューを実現します (検索コンテンツをダウンロードして印刷します)。

まず最初に、この領域の要件について説明します。次のように、対応する id パラメーターをバックグラウンドに送信して、関連するPDF ファイルストリームを取得します。

ここに画像の説明を挿入
私は PDF プレビュー機能をやったことがなかったので、インターネットでたくさんのチュートリアルを読んで夢中になり、同時に多くの方法を試しました。

その中で、Vue のチュートリアルダウンロードプラグイン vue-pdf はドキュメントチュートリアルに従って私のニーズを満たし、私が望む効果も実現しますが、私が作成したプロジェクトは以前の古いプロジェクトによって純粋にネイティブに書かれたものであるため、まだ見る必要がありますpdf.jsの公式ウェブサイト

早速、私のプロセスの手順についてお話しましょう。

①：公式Webサイトにアクセスしてパッケージをダウンロードhttps://github.com/mozilla/pdf.js/releases/download/v1.10.88/pdfjs-1.10.88-dist.zip

②: パッケージをプロジェクトディレクトリに解凍します。
ここに画像の説明を挿入

③：viewer.jsを修正する

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf' //内側は変数定義を削除するPDFのパス（コメントアウト）

ここに画像の説明を挿入

さらに 2080 行を検索

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

着替える

   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');
        }
      }

④: viewer.html を開き<script src="viewer.js"></script>、上記のコードを追加します。

 <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>