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

置顶是日前端

已于 2023-12-21 01:14:34 修改

阅读量5k

点赞数 3

分类专栏： #Vue #项目应用中总结前端文章标签： vue javascript js 前端

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

本文链接：https://blog.csdn.net/focusmickey/article/details/109519682

版权

前端同时被 3 个专栏收录

66 篇文章 26 订阅

订阅专栏

#Vue

40 篇文章 6 订阅

订阅专栏

#项目应用中总结

34 篇文章 4 订阅

订阅专栏

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

预览时候如果想隐藏工具栏有两种方式：
1、使用pdfobject.js插件设置参数

<!DOCTYPE html>
<html>
 <meta charset="utf-8">
 <head> </head>
 <style type="text/css">
  #toolbarViewerRight {
   display: none;
  }

  html,
  body,
  #pdf_viewer {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: red;
  }
  .gray-bg{
   
  }
 </style>
 <body class="gray-bg">
  <div id="pdf_viewer"></div>
  <div></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.6/pdfobject.js"></script>
  <script type="text/javascript">
   if (PDFObject
    .supportsPDFs) { // PDF嵌入到网页         
    var options = {
     pdfOpenParams: {
      scrollbars: '0',
      toolbar: '0',
      statusbar: '0',
      view: 'FitH',
      pagemode: 'none',
      search: 'lorem ipsum',
      
     },
     //禁用工具栏代码   
    };
    PDFObject.embed("test.pdf", "#pdf_viewer", options);
   } else {
    alert("浏览器不支持");
   }
  </script>
 </body>
</html>

2、地址中添加参数信息
?download=0，只预览不下载，默认是下载

#page=pagenum，设置滚动到 pdf 第几页

#zoom=scale，设置缩放比例，缩放值为100表示缩放值为100%

#view=Fit，设置显示区域为适合页面大小

#view=FitH，宽度撑满浏览器窗口，高度自适应

#view=FitV，宽度自适应

#toolbar=1 | 0，打开或关闭工具栏

例如：

this.pdfUrl = this.pdfurl + '?download=0#toolbar=0&view=FitH'

另：滚动条隐藏的方式没找到，html5中把iframe的scrolling属性给取消了，用css也没能实现
打开新浏览器窗口预览文件，窗口置顶

window.open(this.pdfurl + '?download=0#toolbar=0', '_blank', 'alwaysRaised=yes')

二、导出下载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()
      })
    }

excel

let excelUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/vnd.ms-excel'}))

补充一下压缩包的

跟其他的区别主要是Content-Type

headers: {
          'Content-Type': 'application/json; application/octet-stream'
        },
responseType: 'blob',
let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/zip'}))

其他类型的type参数可查看：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

是日前端

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
3
评论
Vue实现pdf（excel）及压缩包或其他类型在线预览、导出下载功能总结(后端返回流，pdf.js)

先说这次的需求，需要在一个vue页面中的一部分实现预览pdf功能一、全屏预览模式先说直接全屏预览的，直接axios获取到数据，将流转为二进制文件，可以window.open也可以嵌入到a标签的href属性中二、利用pdf.js嵌入到iframe中预览第一步跟全屏一样，就是最后打开方式不一样pdf.js官网下载pdf.js文件将文件解压缩，将里面的build和web文件夹放在static目录下面，一定要是static目录目录结构如下接着在组件里就可以直接使用了，iframe的原理是
复制链接

扫一扫

专栏目录