详细|vue中使用PDF.js预览文件实践

·  阅读 725
详细|vue中使用PDF.js预览文件实践

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第24天,点击查看活动详情

详细|vue中使用PDF.js预览文件实践

一、前言

文件预览的需求做过好几次了,在业内也算常见需求吧,今天小结一下使用 pdfjs 做文件预览功能的实践经验。有文件上传的功能就有可能有文件预览的需求,只是看做不做,而现实是文件上传,或说附件上传,在很多项目都有的功能,但是文件预览则可能没那么不多,实际上可以上传,那么附带文件预览应该是一个合理的附加需求,人们上传后想预览一下,看有没有上传错,这很正常。

但文件预览实现起来,可能要比文件上传存储要复杂一些些,而且涉及多种多样的文件类型,这大大加大了预览难度,这也可能是人们能不做文件预览则不做预览的原因之一。

事实上,我的实践经验中,在做技术调研的时候,发现似乎挺多插件能支持各种各样文件格式,但是本身实践不多,所以不谈那种“全能插件”,真有能兼容各种格式的,也欢迎读者们在评论区推荐,最好是自己实际项目中用的,效果不错,然后推荐,先说感谢分享实践经验了!

我的实践是,后端处理各种不同的格式文件,然后转换成 pdf 格式的,前端使用 pdfjs 实现预览功能。

二、PDF.js 简述

请特别注意,这里说的 Mozilla 支持的 PDF.js ,GitHub star 38k+的那个。

PDF.js 是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。由社区驱动并受 Mozilla 支持。我们的目标是创建一个通用的、基于 Web 标准的平台来解析和呈现 PDF。

了解到的 PDF.js 支持的功能:

①在线检索文档中的内容,并支持高亮显示,匹配大小写,统计匹配项等,在检索功能不错。 ②指定页跳转,上下一页。 ③下载当前预览文件。 ④连接打印机打印当前预览文件。 ⑤按比例缩放当前预览的文件,调整阅读视野。 ⑥对当前预览的文件,开启在线演示模式。 ⑦打开阅读本地pdf文件。 ⑧支持大文件分片上传。 ⑨支持在 viewer.html 添加水印。 ⑩预览背景颜色等样式可在 viewer.html 中修改。

选用理由:

①浏览器兼容性较好 ②预览阅读pdf文件功能完善,体验好 ③文档示例多友好 ④易上手,使用简单

下面是两张效果图

image.png

image.png

插件 github 地址 github.com/mozilla/pdf…

插件 api 文档 mozilla.github.io/pdf.js/api/

三、使用过程

1.下载 PDF.js

mozilla.github.io/pdf.js/gett… 页面中找到下载位置,下载 PDF.js

image.png

2.屏蔽跨域错误限制,允许跨域

在viewer.js 中检索到下面这段代码,注释掉,如果不注释,可能会出现跨域错误,无法正常预览文件。

if (origin !== viewerOrigin && protocol !== "blob:") {
  throw new Error("file origin does not match viewer's");
}

image.png

3.安防 PDF.js 插件包到 vue 项目中

把下载到 PDF.js 放在vue项目中的 public 文件夹下。如果是早期版本的vue-cli脚手架放到 static 文件夹下。如果放在 src 文件下,可能不利于引入 viewer.html 进行预览。

4.在vue项目中创建预览路由地址

创建PDF文件夹,并创建 Index.vue 文件,配置相应的路由。

Index.vue 完整代码如下

<template>
  <div class="container">
    <iframe :src="pdfurl" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
  export default {
    name: 'PDF',
    data () {
      return {
        pdfurl: ''
      }
    },
    mounted () {
      const {id} = this.$route.query
      // 获取预览文件的完整接口地址,根据具体情况编写,反正path就是一个预览文件的接口地址
      const path = this.$api.filePreview(id)
      // let path = 'http://14.1.1.1:8088//file/downloadFile?id=140'

      const fileUrl = '/pdfjs2/web/viewer.html'
      // 生产环境下
      if (process.env.NODE_ENV === 'production') {
        this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)
      } else {
      // 开发环境
        this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    height: 100vh;
  }
</style>

5.正式预览文件

打开上一步 PDF文件夹下 Index.vue 的路由地址,并携带像 文件id 这样的参数,结合 iframe 预览。实际上是利用 iframe 的src 嵌入 viewer.html 页面,这样就可以在 vue 中预览 pdf 文件了。

这里需要主要的是, iframe 的 src,请注意看 Index.vue。

PDF.js 文件结构一览

image.png

6.支持添加水印

可以在 viewer.html 中通过 watermark.init() 添加水印。

// 水印文本
var txt = "测试水印";
watermark.init({ watermark_txt: txt, watermark_width: 200});

image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改