后端返回的文件流数据如下图所示：

一、pdf预览功能：

1、接口封装

export function download(data) {      

    return axios({    

        url: 'xxx.pdf',        

        method: 'get',       

         params: data,        

         responseType: 'arraybuffer', // 一定要设置响应类型，否则页面会是空白pdf 

    }

)}

2、页面

<template>

  <div class="wrapper">

      <div v-if="pdfUrl">

        <Pdf :src="pdfUrl"></Pdf>

      </div>

  </div>

</template>

<script>

import Pdf from 'vue-pdf'

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

export default {

  name: "pdf",

  components: {Pdf},

  data() {

    return {

        pdfUrl: null, //pdf地址

    };

  },

  methods: {

      download(){

        var params = {}

        download(params).then(res=> {

            const binaryData = [];

            binaryData.push(res);

            //获取blob链接

            var url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf;charset-UTF-8' }));

            this.pdfUrl = Pdf.createLoadingTask({

                            url: url,

                            cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',

                            cMapPacked: true

                        })

        })

      },

  },

  created() {

    this.download()

  },

};

</script>

<style lang="less" scoped>

    .wrapper {

        background: #F4F6F8;

        height: 100vh;

    }

</style>

后端借鉴链接：https://blog.csdn.net/jinold/article/details/96836230

前端借鉴链接：https://www.jianshu.com/p/950cb898c978?utm_campaign=hugo