使用vue-pdf实现在线预览PDF文件的方法

分类:知识百科 日期: 点击:0

使用vue-pdf实线预览PDF文件

Vue-pdf是一款基于Vue.js的PDF文档预览插件,可以满足用户在线预览PDF文件的需求。Vue-pdf提供了一系列的配置项,可以让用户自定义PDF文件的预览样式,比如是否显示工具栏、放大缩小比例、页码等等。

使用方法

在使用vue-pdf之前,需要先安装vue-pdf插件,可以使用npm或者yarn安装:

npm install vue-pdf --save

在Vue项目的入口文件中引入vue-pdf:

import VuePdf from 'vue-pdf'
Vue.use(VuePdf)

在页面中使用vue-pdf组件:


vue-pdf组件的属性非常多,可以根据需求自定义PDF文件的预览样式,比如是否显示工具栏、放大缩小比例、页码等等:

  • src:PDF文件的路径;
  • page:预览的页码;
  • zoom:放大缩小比例;
  • showToolbar:是否显示工具栏;
  • showNavigation:是否显示导航栏;
  • showPageNumber:是否显示页码;
  • showTitle:是否显示标题;
  • rotate:旋转角度;
  • scale:缩放比例;
  • originalSize:原始尺寸;
  • pageRender:页面渲染回调;
  • pageChange:页面变更回调;
  • zoomChange:放大缩小比例变更回调;
  • error:错误回调;
  • load:加载完成回调;
  • beforePrint:打印之前回调;
  • afterPrint:打印之后回调;
  • loadProgress:加载进度回调;
  • loadingTask:加载任务回调;
  • download:下载回调;
  • autoprint:自动打印;
  • openFile:打开文件回调;
  • printConfig:打印配置;
  • downloadConfig:下载配置;
  • openFileConfig:打开文件配置;
  • autoprintConfig:自动打印配置。

使用vue-pdf,可以很方便的实线预览PDF文件的需求,并且可以自定义PDF文件的预览样式,满足不同用户的需求。

标签:

版权声明

1. 本站所有素材,仅限学习交流,仅展示部分内容,如需查看完整内容,请下载原文件。
2. 会员在本站下载的所有素材,只拥有使用权,著作权归原作者所有。
3. 所有素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 如果素材损害你的权益请联系客服QQ:77594475 处理。