Vue实现pdf（excel）及压缩包或其他类型在线预览、导出下载功能总结(后端返回流，pdf.js)

原创

已于 2023-12-21 01:14:34 修改 · 置顶 · 5.6k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js #前端

于 2020-11-05 20:30:58 首次发布

先说这次的需求，需要在一个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)

最低0.47元/天解锁文章