vue-pdf展示base64编码的PDF文件、支持移动端左右滑动、带git仓库demo

最近接到一个需求，要求在前端展示base64编码的PDF文件。刚好前两天使用过vue-pdf插件，想试试能不能行。

首先在网上搜了一下，基本上是使用pdf.js去实现的，然后去他官网查看了下，发现引入对新手很不友好，不能直接npm安装。

vue-pdf也是基于pdf.js实现的，但是在它的官网中没有标明可以实现展示base64编码的PDF文件。找了一些资料，最后加上了左右滑动切换页面的需求，一起做了个基于 vue-pdf 和 vue-touch 的一个实用实例。 头部展示 上一页 与 下一页 还有 页码 信息。在移动设备上可以 左右滑动来切换页面。

下面直接开搞：

安装vue-pdf

npm install --save vue-pdf

安装vue-touch

npm install vue-touch@next --save

然后在 main.js 上导入并使用：

import VueTouch from "vue-touch"; Vue.use(VueTouch, {name: "v-touch"});

最后将src-->components-->PdfConsult下的组件导入到你要使用到的地方

<template> <div id="app"> <div style="width: 49%;display: inline-block;"> <h3>使用远程链接加载pdf</h3> <PdfConsult class="demo1" :pdfUrl="pdfUrl"></PdfConsult> </div> <div style="width: 49%;display: inline-block;"> <h3>加载base64加密的数据</h3> <PdfConsult class="demo1" :isBase64File="true" :pdfUrl="getGetPDF"></PdfConsult> </div> </div> </template> <script> import PdfConsult from './components/PdfConsult' import getPdf from '@/assets/getPdf.js'; export default { name: 'App', components: { PdfConsult }, data() { return { pdfUrl: 'http://image.cache.timepack.cn/nodejs.pdf', } }, computed:{ getGetPDF:function(){ return getPdf; } } } </script> <style> *{ box-sizing: border-box; } #app { width: 100%; height: 100%; } .demo1{ width: 450px; height: 550px; } </style>

其中 getPdf 中的是 base64 加密的数据，可自行查看，根据业务加载。

API

组件事件

基于 vue-pdf 和 vue-touch 的事件需要自行添加。仅提供 pdf 的 @loaded 事件和 @error 事件

参数

组件参数

参数名类型必填说明pdfUrlStringtrue默认情况下，pdfUrl 是一个网络路径isBase64FileBooleanfalse是否是 Base64 数据，当为 true 时，pdfUrl 应当为加密数据

效果图如下：

最后附上git地址vue-pdf-touch