项目需求需要在vue中展示pdf,vue-pdf这个插件非常好用,并且还有许多方法、属性能进行功能扩展。
一, 安装依赖
npm install --save vue-pdf
二, 基本示例
<template> <div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf> </div> </template> <script> import pdf from ‘vue-pdf‘ export default { name: ‘Pdf‘, components:{ pdf }, data(){ return { pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf", } } </script>
只需在组件的src属性传入pdf的链接就能显示相应的pdf文件。 三,API
Props属性
:src (String/Object)
pdf的链接,可以是相对、绝对地址或者是一个pdf的加载任务
:page (Number-default:1)
需要展示pdf的第几页;
:rotate (Number-default:0)
pdf的旋转角度,‘90’的倍数才有效;
Events回调
@password (updatePassword,reason)
updatePassword:函数提示需要输入的密码;
reason:提示(‘NEED_PASSWORD‘ or ‘INCORRECT_PASSWORD‘);
@progress (Number)
pdf的页面的加载进度,Rang[0,1];
@page-loaded (Number)
pdf某个页面加载成功回调,number为页面索引值;
@num-pages (Number)
监听pdf加载,获取pdf的页数;
@error (Object)
pdf加载失败回调;
@link-clicked (Number)
单机内部链接时触发;
转载于:https://www.cnblogs.com/lodadssd/p/10297989.html
原文地址:https://www.cnblogs.com/tangwei89/p/11526293.html
时间: 2024-10-07 01:07:12