vue 后台返回的文件流进行预览-pdf预览和下载

一、pdf的预览

有建议用pdfJs插件的，有iframe嵌套，下面介绍pdf插件

引入插件

npm install --save vue-pdf

1.接口：

export function pdfInfo(data) {

  return request({

    headers: { 

      'Content-Type': 'application/json'

    },

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

    url: '/orderRecord/pdfInfo',

    method: 'post',

    data

  })

}

2.调用

  pdfInfo(

        this.row.pdfUrls[0]

      )

        .then((response) => {

          const binaryData = []

          binaryData.push(response)

          // 获取blob链接

          this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))

        })

3.界面调用 

<el-dialog title="PDF 预览" :visible.sync="viewVisible" width="70%" center>

      <template>

        <Pdf :src="pdfUrl" />

        <span slot="footer">

          <el-button @click="viewVisible=false">取消</el-button>

          <el-button type="primary" icon="el-icon-download" @click="downloadPdf">下载</el-button>

        </span>

      </template>

//引入插件

import Pdf from 'vue-pdf'

export default {

  components: {  Pdf },

}