篇首语:本文由小编为大家整理,主要介绍了vue中使用vue-pdf插件显示pdf相关的知识,希望对你有一定的参考价值。
项目需求需要在vue中展示pdf,vue-pdf这个插件非常好用,并且还有许多方法、属性能进行功能扩展。
一, 安装依赖
npm install --save vue-pdf
二, 基本示例
<template><p class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf></p></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)
单机内部链接时触发;
线上demo
转载于:https://www.cnblogs.com/lodadssd/p/10297989.html
以上是关于vue中使用vue-pdf插件显示pdf的主要内容,如果未能解决你的问题,请参考以下文章