近期vue移动端项目中遇到了页面内,嵌套展示pdf内容。实现方法很多种,可以用iframe嵌套,但不利于引擎优化seo。所以在网上找到了vue-pdf这个插件,这个插件非常好用,其中封装的方法也很多,属性能进行功能扩展。

接下来开始使用

第一步、安装

npm install --save vue-pdf

第二步、使用

<template>
<div class="pdf">
<pdf
:src="pdfUrl">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
pdfUrl:"pdf存放位置",
}
}
</script>

注意: 1、通过 import pdf from 'vue-pdf' 进行引入,components:{  pdf }进行注册

    2、可能存在跨域问题,这里的src并不能实现jsonp的功能。(这里需要后端配合处理,或者自己写个代理服务器)

三、相关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             单机内部链接时触发;

Public methods公共方法

print(dpi,pageList)

调用浏览器打印功能;

  • dpi打印的分辨率(100)
  • pageList需要打印的页面array

Public static methods静态方法

createLoadingTask(src)

这个方法创建一个当前pdf的加载任务,可以作为:src使用或者公开的获取当前pdf的页面总数;

四、相关示例

  由于pdf文档可能有很多页,解析时不会当做一张大图进行处理,默认只会展示第一页内容,想要全部查看需要进行特殊处理

1、上一页下一页进行翻阅

<pdf  :src="path" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>
翻页缩小:
<ul class="footers"> <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
<p>上一页</p>
</li>
<li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
<p>下一页</p>
</li>
</ul> import pdf from "vue-pdf";
export default {
name: "inspectionPresentation",
components: {
pdf
},
data() {
return {
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
path: this.$route.params.path,
scale: 100, //放大系数
idx: -1,
clauseTitle: "",
loadedRatio: 0
};
}, methods{
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
if(val === 0 && this.currentPage > 1) {
this.currentPage--;
}
if(val === 1 && this.currentPage < this.pageCount) {
this.currentPage++;
}
},
goBack() {
this.$router.go(-1);
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
},
//放大
scaleD() {
this.scale += 5;
// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
}, //缩小
scaleX() {
if(this.scale == 100) {
return;
}
this.scale += -5;
this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
},
}

2、滚动加载、显示全部

这里写法注意点:

  网上大部分写法是this.pdfSrc.then(),这种写法是不正确的,会报this.pdfSrc.then is not a function 错误

正确写法:   this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
      this.pdfSrc.promise.then(pdf => {
    this.numPages = pdf.numPages
    })
<pdf
v-for="i in numPages"
:key="i"
:src="pdfSrc"
:page="i">
</pdf>
import pdf from 'vue-pdf'
components: { pdf} previewPdf(url){
this.pdfSrc=url
this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
this.pdfSrc.promise.then(pdf => {
this.numPages = pdf.numPages
})
},

vue 实现页面嵌套pdf之vue-pdf插件的更多相关文章

  1. Vue系列(2):Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  2. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  3. 单页面(如react,vue)网站的服务器渲染 SSR 之 SEO 大杀器 Rendertron

    单页面网站,比如vue.recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面. 但是搜索引擎的爬虫可没有这么智能(实际上go ...

  4. vue 单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...

  5. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. VUE --- 给页面加点网络动态数据

    这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容.对应有一个库叫 vue-resource 帮我们解决这个问题. 使用命令行安装 cn ...

  7. 将w3cplus网站中的文章页面提取并导出为pdf文档

    最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...

  8. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  9. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

随机推荐

  1. redis跳表

    redis使用跳表作为有序集合的底层实现之一,下面来看下跳表的结构 一.跳表的结构

  2. 2019牛客多校第六场H Pair(数位DP 多个数相关)题解

    题意: 传送门 给你\(A,B,C\),要求你给出有多少对\((x, y)\)满足\(x\in [1,A],y\in [1,B]\),且满足以下任意一个条件:\(x \& y > C\) ...

  3. Gym 101170F Free Weights(二分)题解

    题意:给出两行,每一行都有n个数组,一共有2 * n个,大小为1~n,每个有两个.现在可以进行操作:拿出一个物品i,然后放到一个空格,花费i.可以任意平移物品,平移没有花费.每一行空间无限.要求你把一 ...

  4. 洛谷p2216 多次单调队列,扫描矩阵中的最大值减去最小值最的固定大小子矩阵

    #include <iostream> #include <cstdio> #include <cstring> using namespace std; int ...

  5. 重新上手c语言的一些坑

    c语言结构体不能声明函数,放几个函数指针倒是没问题 c语言结构体不能在声明时初始化 声明两个指针 int *a,*b; 或者typedef int* int_P int_P a,b; typedef要 ...

  6. Hacker101 CTF-Micro-CMS v2

    一.打开网站是这个样子 找到一个登录框,存在注入漏洞 3.我们可以这样更改用户名中的输入: admin' or 1=1 -- 4.错误消息显示Invalid Password,因此我们也应该尝试构造一 ...

  7. hihoCoder Challenge 2

    #1046 : K个串 时间限制:40000ms 单点时限:2000ms 内存限制:1024MB 描述 兔子们在玩k个串的游戏.首先,它们拿出了一个长度为n的数字序列,选出其中的一个连续子串,然后统计 ...

  8. Design Patterns All in One (JavaScript Version)

    Design Patterns All in One (JavaScript Version) JavaScript 设计模式 JavaScript 数据结构 23种设计模式分为 3 大类: 创建型模 ...

  9. 2016 JS 笔试题汇总:

    1 1 1 CS&S(中软国际): 1 JavaScript 循环表达式: 2  JavaScript表达式boolean返回值: 3 网页中的事件/HTML 事件属性/JavaScript ...

  10. node.js module.exports & exports & module.export all in one

    node.js module.exports & exports & module.export all in one cjs const log = console.log; log ...