前端---文件下载通用工具类、后端将pdf文件以流形式返回，前端实现pdf文件预览

小鱼儿 2022-11-29 12:22 205阅读 0赞

*  **前端文件下载通用工具类**

//下载文件处理工具 ：  responase：接口返回的整体数据  fileName(非必传)：自定义的文件名，例：xx.xlsx，如果没传，就用原文件名
        Vue.prototype.$download = (response,fileName) => {
            const originalFileName = decodeURI(response.headers['content-disposition'].split('filename=')[1]); // 原文件名
            const blob = new Blob([response.data], { type: 'application/octet-stream'});                       // 将二进制流转为Blob对象
            //利用h5超链接a的download属性进行下载文件
            const eLink = document.createElement('a');                                                             
            eLink.style.display = 'none';
            eLink.href = window.URL.createObjectURL(blob);
            eLink.download = (fileName == null || fileName == '') ? originalFileName : fileName;               //有传fileName，就用fileName
            document.body.appendChild(eLink);                                                    
            eLink.click();
            document.body.removeChild(eLink);
            window.URL.revokeObjectURL(blob);                                                                   //释放
        }

*  **后端流形式返回PDF文件，前端实现预览**

**       **通过iframe打开资源。此种方式兼容多种浏览器，包括IE。最佳方案。

<template>
      <div class="PdfView">
        <iframe :src="pdfUrl" width="100%" height="100%"></iframe>
      </div>
    </template>
    
    <script>
    export default {
      name: "PdfView",
      data() {
        return {
          pdfUrl: "",                 //pdf路径
        };
      },
      mounted() {
        this.pdfView();
      },
      methods: {
        pdfView() {                   //请求后端接口，拿到流数据，转为Blob对象，在转为url
          this.$axios
            .get({
              url: this.$api.fileDownloadByGet,
              data: {},
              responseType: "blob",
            })
            .then((response) => {
              const blob = new Blob([response.data], { type: "application/pdf" });
              let pdfUrl = window.URL.createObjectURL(blob);
              this.pdfUrl = pdfUrl;
            });
        },
      },
    };
    </script>
    
    <style scoped>
    .PdfView {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      bottom: 0;
    }
    </style>