Vue でバイナリ ファイル ストリームを受信して​​ PDF プレビューを実現する方法

@RequestMapping("/getPDFStream")
@レスポンス本文
パブリック void getPDFStream(HttpServletRequest リクエスト、HttpServletResponse レスポンス) {
 試す {
  リクエスト.setCharacterEncoding("utf-8");
 } キャッチ (UnsupportedEncodingException e) {
  logger.error("文字セット UnsupportedEncodingException を設定しました");
 }
 文字列 fileName = request.getParameter("fileName");
 //ファイルパスString filePathname = Const.UPLOAD_HBFILE_PATH + "/" + fileName
   + ".pdf";
 ファイル file = new File(filePathname);
 バイト[]データ = null;
 ファイルが存在する場合（）{
  logger.error("申し訳ありませんが、ファイルが存在しません!");
 } それ以外 {
  試す {
   FileInputStream 入力 = new FileInputStream(ファイル);
   データ = 新しいバイト[input.available()];
   input.read(データ);
   レスポンス.getOutputStream().write(データ);
   入力を閉じます。
  } キャッチ (例外 e) {
   // TODO 自動生成されたキャッチブロック
   e.printStackTrace();
   logger.error("pdf ファイル処理例外");
  }
 }
}

'axios' から axios をインポートします
/**
 * axios 非同期リクエストをカプセル化する方法==================
 */
//axios オブジェクトを作成する-----------
定数リクエスト = axios.create({
    //baseURL:'/dev-api', //ベースパス baseURL:process.env.VUE_APP_BASE_API, //環境に応じて異なる定数値をロード // baseURL: '/',
    timeout: 50000, //リクエストタイムアウト、50000ミリ秒})
//リクエストインターセプターを設定する======================================
//リクエストのインターセプション--------------------
リクエスト.インターセプター.リクエスト.use(config => {
    //リクエストインターセプション config.data = {
        ...config.data、
        ユーザーID: sessionStorage.getItem('userId')
    }
    設定を返します。
}, エラー => {
    //例外 return Promise.reject(error); //es6 書き込み });
//レスポンスインターセプターを設定する====================================
//傍受に応答--------------------
リクエスト.インターセプター.レスポンス.use(レスポンス => {
    if(!response.data||response.data==""){
        '{"flag":"failure","msg":"不明なエラー"}' を返します。
    }
    応答データを返します。
},エラー =>{
    Promise.reject(error) を返します。
})
export default request // 他のコンポーネントで使用するためにカスタム作成された axios オブジェクトをエクスポートします

import request from '@/utils/request' //カプセル化されたaxiosリクエストメソッドをインポートする export function getPDFStream(param) {
   リクエストを返す({
        url: 'xxxxxx/getPDFStream',
        メソッド: 'post'、
        // パラメータデータを渡す: param,
        ヘッダー: { 'Content-Type': 'application/x-www-form-urlencoded' },
        レスポンスタイプ: 'blob',
        変換リクエスト: 関数(obj) {
            var str = [];
            (変数 p 内の obj) の場合
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            str.join("&"); を返します。
        },
 })
}

 <a-モーダル
  幅="900px"
  title="ファイルビュー"
  v-model="lookPdfFile"
  :footer="null"
  :forceRender="true"
  @ok="PDFファイルを見る"
>
  <div :style="{ 高さ: '600px', 最小高さ: '500px', 余白: '8px 0px' }">
     <iframe :src="pdfUrl" id="previewPdf" frameborder="0" style="幅: 100%; 高さ: 100%"></iframe>
  </div>
</a-modal>

// メソッドをインポートしますimport {getPDFStream} from "@/api/common";
//データを定義する
lookPdfFile:false, //PDF をプレビュー
pdfUrl:'', // pdf パス

 _this = this とします。
 if(サフィックス == 'pdf'){
   PDFストリームを取得する({
     ファイル名: ファイル名、
   }).then(res => {
     reader を new window.FileReader() に設定します。
     // readAsArrayBuffer を使用してファイルを読み取ります。結果プロパティには、読み取ったファイルのデータを表す ArrayBuffer オブジェクトが含まれます。reader.readAsArrayBuffer(res);
     reader.onload = 関数(e) {
       定数結果 = e.target.result
       定数コンテンツタイプ = res.type
       // BLOB イメージを生成します。パラメータが必要です (バイト配列、ファイル タイプ)
       const blob = new Blob([結果], { type: 'application/pdf' })
       // Blobを使用して、型付き配列を指すURLを作成します。URL.createObjectURLは新しいBlobファイルのメソッドで、通常のURLを生成し、img.srcなどに直接使用できます。if (window.createObjectURL != undefined) { // 基本
         _this.pdfUrl = window.createObjectURL(blob)+'#toolbar=0'
       } else if (window.webkitURL != undefined) { // webkit または chrome
         試す {
           _this.pdfUrl = window.webkitURL.createObjectURL(blob)+'#toolbar=0'
         } キャッチ（エラー）{

         }
       } そうでない場合 (window.URL != undefined) { // mozilla(firefox)
         試す {
           _this.pdfUrl = window.URL.createObjectURL(blob)+'#toolbar=0'
         } キャッチ（エラー）{

         }
       }
     }
     this.$nextTick(() => {
       this.lookPdfFile = true;
     })
   })
   戻る;
 }