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

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

    //下载文件处理工具 ：  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>