Vue实现pdf在线预览、导出下载功能总结(后端返回流,pdf.js)

·  阅读 3165

先说这次的需求,需要在一个vue页面中的一部分实现预览pdf功能

一、全屏预览模式

先说直接全屏预览的,直接axios获取到数据,将流转为二进制文件,

  • 可以window.open
  • 也可以嵌入到a标签的href属性中

二、利用pdf.js嵌入到iframe中预览

第一步跟全屏一样,就是最后打开方式不一样 pdf.js官网下载pdf.js文件 将文件解压缩,将里面的build和web文件夹放在static目录下面,一定要是static目录 目录结构如下 在这里插入图片描述 接着在组件里就可以直接使用了, iframe的原理是将一个html页面嵌入在另一个html页面中

<iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe>
复制代码

附代码: vue组件中:

<iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe>
复制代码

首先通过axios调用后台接口获取流数据

// 获取流
export function getStream(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
      responseType: 'arraybuffer' // 关键,必须要设置响应类型,否则pdf没有内容都是空白页 
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
复制代码

流转成二进制文件方法

// 生成数据报告->pdf预览
    pdfPreview(year) {
      let param = {
        types: this.types,
        year: this.year
      }
      console.log('传递的参数为', param)
      getDatareportData(param).then(res => {
        console.log('调用生成数据报告接口返回数据', res)
        const binaryData = [];
        binaryData.push(res);       
        this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
        // window.open(this.pdfUrl);
      })
    }
复制代码

但是这样iframe的高度始终是固定的,需要再动态改变一下高度

// 改变iframe高度
    changeFrameHeight() {
      let pdfCotainer = this.$refs.pdfCotainer;
      pdfCotainer.height = document.documentElement.clientHeight;
    }
复制代码

二、导出下载pdf

axios获取到数据,将流转为二进制文件,创建一个a标签,将链接嵌入到a标签的href属性中,将a标签添加到页面上,点击链接下载

// 导出报告
    exportReport() {
      console.log('点击了导出报告', this.filename)
      ExportDatareport().then(res => {
        console.log('调用导出pdf接口返回', res)
        const binaryData = [];
        binaryData.push(res);
        // 获取blob链接
        this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, {type: `application/pdf`}))
        const link = document.createElement('a')
        link.href = this.pdfUrl
        link.setAttribute('download', this.filename)
        document.body.appendChild(link)
        link.click()
      })
    }
复制代码
分类:
前端
标签: