Vue中接收二進(jìn)制文件流如何實(shí)現(xiàn)pdf預(yù)覽

這篇文章主要講解了“Vue中接收二進(jìn)制文件流如何實(shí)現(xiàn)pdf預(yù)覽”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue中接收二進(jìn)制文件流如何實(shí)現(xiàn)pdf預(yù)覽”吧！

后臺(tái)Controller

@RequestMapping("/getPDFStream")
@ResponseBody
public void getPDFStream(HttpServletRequest request,HttpServletResponse response) {
 try {
  request.setCharacterEncoding("utf-8");
 } catch (UnsupportedEncodingException e) {
  logger.error("設(shè)置字符集UnsupportedEncodingException");
 }
 String fileName = request.getParameter("fileName");
 //文件路徑
 String filePathname = Const.UPLOAD_HBFILE_PATH + "/" + fileName
   + ".pdf";
 File file = new File(filePathname);
 byte[] data = null;
 if (!file.exists()) {
  logger.error("Sorry File does not Exists!");
 } else {
  try {
   FileInputStream input = new FileInputStream(file);
   data = new byte[input.available()];
   input.read(data);
   response.getOutputStream().write(data);
   input.close();
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
   logger.error("pdf文件處理異常");
  }
 }
}

前臺(tái)接收

封裝axios, request.js

import axios from 'axios'
/**
 * 封裝axios異步請(qǐng)求的方法==================
 */
//創(chuàng)建一個(gè)axios對(duì)象-----------
const request = axios.create({
    //baseURL:'/dev-api',//基礎(chǔ)路徑
    baseURL:process.env.VUE_APP_BASE_API,//根據(jù)不同的環(huán)境，加載不同的常量值
  //  baseURL: '/',
    timeout: 50000,//請(qǐng)求超時(shí)，50000毫秒
})
//設(shè)置請(qǐng)求攔截器====================================
//對(duì)攔截進(jìn)行請(qǐng)求--------------------
request.interceptors.request.use(config => {
    //請(qǐng)求攔截
    config.data = {
        ...config.data,
        userId: sessionStorage.getItem('userId')
    }
    return config;
}, error => {
    //出現(xiàn)異常
    return Promise.reject(error);//es6寫法
});
//設(shè)置響應(yīng)攔截器==================================
//對(duì)攔截進(jìn)行響應(yīng)--------------------
request.interceptors.response.use(response =>{
    if(!response.data||response.data==""){
        return '{"flag":"failure","msg":"未知錯(cuò)誤"}';
    }
    return response.data;
},error =>{
    return Promise.reject(error);
})
export default request //導(dǎo)出自定義創(chuàng)建的axios對(duì)象,供其他組件進(jìn)行使用

定義方法 common.js

import request from '@/utils/request' //導(dǎo)入已經(jīng)封裝好的axios請(qǐng)求方式
export function getPDFStream(param) {
   return request({
        url: 'xxxxxx/getPDFStream',
        method: 'post',
        //傳遞參數(shù)
        data: param,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        responseType: 'blob',
        transformRequest: function(obj) {
            var str = [];
            for (var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        },
 })
}

頁面代碼

 <a-modal
  width="900px"
  title="文件查看"
  v-model="lookPdfFile"
  :footer="null"
  :forceRender="true"
  @ok="lookPdfFile"
>
  <div :>
     <iframe :src="pdfUrl" id="previewPdf" frameborder="0" ></iframe>
  </div>
</a-modal>

//導(dǎo)入方法
import {getPDFStream} from "@/api/common";
//定義data
lookPdfFile:false,//預(yù)覽pdf
pdfUrl:'',// pdf路徑

關(guān)鍵代碼（獲取文件名稱后調(diào)用getPDFStream方法獲取文件流）

 let _this = this;
 if(suffix == 'pdf'){
   getPDFStream({
     fileName: filename,
   }).then(res => {
     let reader = new window.FileReader();
     // 使用readAsArrayBuffer讀取文件, result屬性中將包含一個(gè) ArrayBuffer 對(duì)象以表示所讀取文件的數(shù)據(jù)
     reader.readAsArrayBuffer(res);
     reader.onload = function(e) {
       const result = e.target.result
       const contentType = res.type
       // 生成blob圖片,需要參數(shù)(字節(jié)數(shù)組, 文件類型)
       const blob = new Blob([result], { type: 'application/pdf' })
       // 使用 Blob 創(chuàng)建一個(gè)指向類型化數(shù)組的URL, URL.createObjectURL是new Blob文件的方法,可以生成一個(gè)普通的url,可以直接使用,比如用在img.src上
       if (window.createObjectURL != undefined) { // basic
         _this.pdfUrl = window.createObjectURL(blob)+'#toolbar=0'
       } else if (window.webkitURL != undefined) { // webkit or chrome
         try {
           _this.pdfUrl = window.webkitURL.createObjectURL(blob)+'#toolbar=0'
         } catch (error) {

         }
       } else if (window.URL != undefined) { // mozilla(firefox)
         try {
           _this.pdfUrl = window.URL.createObjectURL(blob)+'#toolbar=0'
         } catch (error) {

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

感謝各位的閱讀，以上就是“Vue中接收二進(jìn)制文件流如何實(shí)現(xiàn)pdf預(yù)覽”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue中接收二進(jìn)制文件流如何實(shí)現(xiàn)pdf預(yù)覽這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！