So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren

@RequestMapping("/getPDFStream")
@AntwortBody
public void getPDFStream(HttpServletRequest Anfrage,HttpServletResponse Antwort) {
 versuchen {
  Anfrage.setCharacterEncoding("utf-8");
 } Fang (UnsupportedEncodingException e) {
  logger.error("Zeichensatz UnsupportedEncodingException festlegen");
 }
 String Dateiname = Anfrage.getParameter("Dateiname");
 //DateipfadString filePathname = Const.UPLOAD_HBFILE_PATH + "/" + fileName
   + ".pdf";
 Datei Datei = neue Datei (Dateipfadname);
 byte[] Daten = null;
 wenn (!file.exists()) {
  logger.error("Leider existiert die Datei nicht!");
 } anders {
  versuchen {
   FileInputStream-Eingabe = neuer FileInputStream(Datei);
   Daten = neues Byte[Eingabe.verfügbar()];
   Eingabe.Lesen(Daten);
   Antwort.getOutputStream().write(data);
   Eingabe.schließen();
  } Fang (Ausnahme e) {
   // TODO Automatisch generierter Catch-Block
   e.printStackTrace();
   logger.error("Ausnahme bei der Verarbeitung der PDF-Datei");
  }
 }
}

Axios von „Axios“ importieren
/**
 * Methode zum Kapseln asynchroner Axios-Anfragen==================
 */
//Erstellen Sie ein Axios-Objekt-----------
const Anfrage = axios.erstellen({
    //baseURL:'/dev-api', //Basispfad baseURL:process.env.VUE_APP_BASE_API, //Lade je nach Umgebung unterschiedliche Konstantenwerte // baseURL: '/',
    timeout: 50000, //Anforderungstimeout, 50000 Millisekunden})
//Anforderungs-Interceptor einrichten======================================
//Abfangen anfordern--------------------
request.interceptors.request.use(config => {
    //Abfangen der Anforderung config.data = {
        ...Konfigurationsdaten,
        Benutzer-ID: sessionStorage.getItem('Benutzer-ID')
    }
    Konfiguration zurückgeben;
}, Fehler => {
    //Ausnahme return Promise.reject(error); //es6 schreibt });
//Antwort-Interceptor einrichten====================================
//Auf Abfangen reagieren--------------------
Anfrage.Interceptors.Response.Verwenden(Antwort => {
    wenn(!response.data||response.data==""){
        return '{"flag":"failure","msg":"Unbekannter Fehler"}';
    }
    Antwortdaten zurückgeben;
},Fehler =>{
    returniere Promise.reject(Fehler);
})
Export-Standardanforderung //Exportieren Sie benutzerdefinierte Axios-Objekte zur Verwendung durch andere Komponenten

Importanforderung von '@/utils/request' //Importiere die gekapselte Axios-Anforderungsmethode Exportfunktion getPDFStream(param) {
   Rückgabeanforderung({
        URL: "xxxxxx/getPDFStream",
        Methode: 'post',
        // Parameterdaten übergeben: param,
        Header: { 'Inhaltstyp': 'Anwendung/x-www-form-urlencoded' },
        Antworttyp: "Blob",
        transformRequest: Funktion(Objekt) {
            var str = [];
            für (var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        },
 })
}

 <a-modal
  Breite="900px"
  Titel="Dateiansicht"
  v-Modell="lookPdfFile"
  :Fußzeile="null"
  :forceRender="wahr"
  @ok="PDF-Datei ansehen"
>
  <div :style="{ Höhe: '600px', min. Höhe: '500px', Rand: '8px 0px' }">
     <iframe: src="pdfUrl" id="VorschauPDF" frameborder="0" style="Breite: 100 %; Höhe: 100 %"></iframe>
  </div>
</a-modal>

//Importmethodeimport {getPDFStream} von "@/api/common";
//Daten definieren
lookPdfFile:false, //PDF-Vorschau
pdfUrl:'', // PDF-Pfad

 lass _this = dies;
 wenn(Suffix == 'pdf'){
   getPDFStream({
     Dateiname: Dateiname,
   }).dann(res => {
     let reader = neues Fenster.FileReader();
     // Verwenden Sie readAsArrayBuffer, um die Datei zu lesen. Die Ergebniseigenschaft enthält ein ArrayBuffer-Objekt, um die Daten der gelesenen Datei darzustellen. reader.readAsArrayBuffer(res);
     reader.onload = Funktion(e) {
       const Ergebnis = e.Ziel.Ergebnis
       const Inhaltstyp = res.Typ
       // Blob-Bild generieren, erfordert Parameter (Byte-Array, Dateityp)
       const blob = neuer Blob([Ergebnis], { Typ: 'Anwendung/pdf' })
       // Verwenden Sie Blob, um eine URL zu erstellen, die auf ein typisiertes Array verweist. URL.createObjectURL ist eine Methode einer neuen Blob-Datei, die eine normale URL generieren und direkt verwendet werden kann, z. B. auf img.src if (window.createObjectURL != undefined) { // basic
         _this.pdfUrl = Fenster.createObjectURL(blob)+'#toolbar=0'
       } sonst wenn (window.webkitURL != undefiniert) { // WebKit oder Chrome
         versuchen {
           _this.pdfUrl = Fenster.webkitURL.createObjectURL(blob)+'#toolbar=0'
         } Fehler abfangen {

         }
       } sonst wenn (window.URL != undefiniert) { // mozilla(firefox)
         versuchen {
           _this.pdfUrl = Fenster.URL.createObjectURL(blob)+'#toolbar=0'
         } Fehler abfangen {

         }
       }
     }
     dies.$nextTick(() => {
       dies.lookPdfFile = wahr;
     })
   })
   zurückkehren;
 }