vue-pdf展示base64编码的PDF文件、支持移动端左右滑动、带git仓库demo
最近接到一个需求,要求在前端展示base64编码的PDF文件。刚好前两天使用过vue-pdf插件,想试试能不能行。首先在网上搜了一下,基本上是使用pdf.js去实现的,然后去他官网查看了下,发现引入对新手很不友好,不能直接npm安装。vue-pdf也是基于pdf.js实现的,但是在它的官网中没有标明可以实现展示base64编码的PDF文件。找了一些资料,最后加上了左右滑动切换页面的需求,一起做了个
·
最近接到一个需求,要求在前端展示base64编码的PDF文件。刚好前两天使用过vue-pdf插件,想试试能不能行。
首先在网上搜了一下,基本上是使用pdf.js去实现的,然后去他官网查看了下,发现引入对新手很不友好,不能直接npm安装。
vue-pdf也是基于pdf.js实现的,但是在它的官网中没有标明可以实现展示base64编码的PDF文件。找了一些资料,最后加上了左右滑动切换页面的需求,一起做了个基于 vue-pdf 和 vue-touch 的一个实用实例。 头部展示 上一页 与 下一页 还有 页码 信息。在移动设备上可以 左右滑动来切换页面。
下面直接开搞:
npm i vue-pdf-touch
然后在 main.js 上导入并使用:
import VuePdfTouch from 'VuePdfTouch'
Vue.use(VuePdfTouch);
--或者--
安装vue-pdf
npm install --save vue-pdf
npm install vue-touch@next --save
然后在 main.js 上导入并使用:
import VueTouch from "vue-touch";
Vue.use(VueTouch, {name: "v-touch"});
最后将src-->components-->VuePdfTouch下的组件导入到你要使用到的地方
<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>
<VuePdfTouch class="demo1" :isBase64File="true" :pdfUrl="getGetPDF"></VuePdfTouch>
</div>
</div>
</template>
<script>
import VuePdfTouch from './components/VuePdfTouch'
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 事件
参数
组件参数
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
pdfUrl | String | true | 默认情况下,pdfUrl 是一个网络路径 |
isBase64File | Boolean | false | 是否是 Base64 数据,当为 true 时,pdfUrl 应当为加密数据 |
效果图如下:
最后附上git地址vue-pdf-touch
更多推荐
已为社区贡献3条内容
所有评论(0)