vue中使用vue-pdf插件显示pdf

项目需求需要在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)

单机内部链接时触发;

线上demo

转载于:https://www.cnblogs.com/lodadssd/p/10297989.html

原文地址:https://www.cnblogs.com/tangwei89/p/11526293.html

时间: 2024-10-07 01:07:12

vue中使用vue-pdf插件显示pdf的相关文章

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

vue中使用剪切板插件 clipboard.js

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮, <p id="share-code">{{init.code}}</p> <button class="copy-btn" data-clipboa

vue 中引入瀑布流插件 vue-masonry

1:首先下载vue-masonry npm install vue-masonry 2:在main.js 配置如下 3:在所需要的组件下 写入模板

Vue中组件(.vue文件)

Vue组件 组件的构成 一个.vue文件就是一个组件 组件都是由三部分组成:html结构(html结构都是在template标签中).js逻辑.css样式 1)template只能解析一个根标签 2)js逻辑都是在script标签中,必须设置导出,export default {...} 3)css样式都是在style标签中,必须设置scoped属性,是样式组件化 <template> <div class="first-cp"> <h1>第一个组件

使用pdf.js显示pdf文件

<script type="text/javascript" src="build/pdf.min.js"></script> <script type="text/javascript"> PDFJS.workerSrc = 'build/pdf.worker.min.js'; </script> <script type="text/javascript"> $.

2016.4.6 WinForm显示PDF两种方法

1.最直接的方法,添加webbrowser控件 webb.Url = new Uri(path);可显示pdf控件. 如果需要在打开时跳转到某页,可用在路径后直接加#page=,例如webb.Url = new Uri("d:\\a.pdf#page=5") 如果设置打开时的放大率,可用webb.Url = new Uri("d:\\a.pdf#page=5&room=120") 这种方法最简单,但在打开后无法控制页面跳转,页面布局等操作. 2.第二种方法,

在网页中显示PDF文件及vue项目中弹出PDF

1.<embed width="800" height="600" src="test_pdf.pdf"> </embed>  <embed v-show="pdfShow" width="800" height="600" src="../../../public/data/significant.pdf"> </embed

在jsp上显示pdf||网页直接打开PDF 在IE中显示pdf文档的方法及参数设置

一:在jsp上显示pdf <%@ page language="java" import="java.util.*,java.io.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://"     + request.getSer

在网页浏览器中原生显示PDF文件

在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器,像Chrome,火狐等),加逐步加载. <html><body marginwidth="0" marginheight="0" style="<embed width="100%" height="100