项目中时常会遇到在线预览PDF文件的需求,网上一找也能找到很多,但被使用率高的并不多,经过多次实验发现被应该最多的还属pdfjs插件。

首先介绍下:Pdf.js插件是由Mozilla 主导推出的

作用:在线预览PDF文件。

使用方法:肯定是去官方网站下载文件代码包了

第一步:上官网下载:/https://mozilla.github.io/pdf.js/getting_started/#download

可以通过码云仓库下载:https://gitee.com/hyser/pdf-js.git

第二步:代码实际操作

1、把文件pdfjs扔项目中

2、pdfJs的目录结构(如图1):

build是一些核心文件,web中的viewer.html就是需要使用到的母版文件。

1、将整个文件夹放入自己的工程文件里,因为在使用的过程中要跳转至母版文件,所以要注意文件的放置位置要方便使用。避免出现问题,这里建议放在与public同级目录static下。

2、代码:为了更清晰,这里把实现中所有代码都贴上来了

1) 在某个路由里做个demo代码贴进来就行,当然要放template里哈,用iframe引入,pdfSrc为pdf线上地址变量

用着的变量

Pdf地址放iframe上

高度样式自行调整

可以看到左侧是缩略图,右侧菜单还有各项功能,移动端还可以启用手形工具,我的截图里把部分功能隐藏了

一般情况下,pdf在线阅读都不希望被下载或打印,因此需要将右上角那几个按钮隐藏。

可以修改viewer.js文件,搜索 webViewerInitialized() 部分(大概2242行),在 appConfig 下面插入下面的代码即可:

再次运行viewer.html,发现右上角的打开、下载、打印等按钮都不见了。

Pdfjs第三方插件使用的更多相关文章

  1. zabbix通过第三方插件percona监控mysql数据库

     zabbix通过第三方插件percona监控mysql数据库                                                                     ...

  2. iOS 开发:利用第三方插件来安装CoCoapods

    引言:通过上一篇博客我们知道了怎么样去通过终端来安装CoCoapods,这一篇我们着重与用第三方插件来安装CoCoapods: 1. 首先在提下链接下载插件 https://github.com/ka ...

  3. 苹果下如果安装nginx,给nginx安装markdown第三方插件

    用brew install nginx 这样安装的是最新版的nginx, 但是在有些情况下,安装第三方插件需要特定的版本,更高一级的版本可能装不上. 它的原理是下载安装包进行自动安装,建立软链,这样就 ...

  4. ThinkPHP自动获取关键词(调用第三方插件)

    ThinkPHP自动获取关键词调用在线discuz词库 先按照下图路径放好插件 方法如下 /** * 自动获取关键词(调用第三方插件) * @return [type] [description] * ...

  5. iOS 学习笔记 十 (2015.04.03)xcode第三方插件

    1.xcode第三方插件,存放路径:~/Library/Application Support/Developer/Shared/Xcode/Plug-ins

  6. zatree第三方插件

    Zabbix安装第三方插件zatree2.4.5 1.下载zatree第三方插件https://github.com/spide4k/zatree.git 2.检查PHP环境需要支持php-xml.p ...

  7. [iOS 10 day by day] Day 1:开发 iMessage 的第三方插件

    本文介绍了 iOS 10 的一个重要更新:Messages 应用支持第三方插件了.作者用一个小游戏作为例子,说明了插件开发从建工程开始,到绘制界面.收发消息的全过程. <iOS 10 day b ...

  8. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  9. 【收藏】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  10. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

随机推荐

  1. 兼容IE全版本及所有市面浏览器的网页变黑白处理方式

    大家应该有发现最近几天不少网站变成了黑白色,在哀悼日时,很多网站都需要全站变成黑白配色,今天对这个实现的技术做了一些探索性了解,在此进行一个记录分享. 使用的样式部分:下面的css部分想必大家应该都可 ...

  2. 01.Java面试都问啥?

    大家好,我是王有志.好久不见,不过这次没有休假,而是搞了个"大"工程,花了点时间自学Python,然后写了"玩具爬虫",爬某准网的面经数据,为来年的" ...

  3. 记一次在CentOS上安装GitLab的流程

    1.本次环境说明 系统:Centos7.6 IP地址:http://192.168.3.213: 最低配置要求:2核心CPU和4G内存,这是因为[GitLab]的整体运行包含了多个进程  2.自行安装 ...

  4. BalticOI 2004 Sequence 题解

    题目链接在这里~ 对于序列\(\{a\}\),把每一个\(a_i\)减去一个\(i\),得到\(\{a'\}\)序列\(\{b\}\)同理. 因为\(b_1<b_2<...<b_n\ ...

  5. Windows下使用vscode连接Linux服务器进行C++代码运行与调试

    参考链接: vscode + SSH 配置 https://blog.csdn.net/irober/article/details/112724986 launch.json + tasks.jso ...

  6. 【LeetCode链表#9】图解:两两交换链表节点

    两两交换链表中的节点 力扣题目链接(opens new window) 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 思路 ...

  7. Python邮箱推送

    利用python进行邮箱推送可以配和爬虫使用,也可以监控github上面CVE等 一个基于Python的邮箱推送脚本 需要有一个邮箱授权码不知道哪里获取可以百度就不多详细的描述了 成品: # 发送多种 ...

  8. Java 进阶P-8.13+P-8.14

    格式化输入输出 Print Writer format("格式",...); printf("格式",...); print(各种基本类型); println( ...

  9. centos7系统的安装部署过程

    一.进入系统引导界面进行配置 引导项说明: 安装centos7系统(*) 测试光盘镜像并安装系统 排错模式(修复系统 重置系统密码) 补充:centos7系统网卡名称 默认系统的网卡名称 eth0 e ...

  10. 最容易懂的策略模式消除if-else分支,实现开闭原则,提高可扩展性

    1 介绍 策略模式最常用的场景就是用于消除代码中的if-else,这里所说的if-else并不是说任何简单的判断都引入策略模式来优化,这样反而会增加代码的复杂度. 反例:使用策略模式对一个boolea ...