项目中时常会遇到在线预览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. 1.3 Apache Hadoop的重要组成-hadoop-最全最完整的保姆级的java大数据学习资料

    目录 1.3 Apache Hadoop的重要组成 1.3 Apache Hadoop的重要组成 Hadoop=HDFS(分布式文件系统)+MapReduce(分布式计算框架)+Yarn(资源协调框架 ...

  2. 【Java进阶】五分钟快速掌握JVM优化概念、常用命令、工具、JUC、多线程、GC等知识

    〇.概述 (一)资料 史上最全最详细的JVM优化方案:http://www.360doc.com/content/22/0513/10/34195792_1031121509.shtml (二)内容概 ...

  3. 常用函数/异常处理/for循环本质

    常用内置函数 1,map() - 映射 格式: map(函数,可遍历对象) 指将遍历的元素挨个取出来做函数的行参传参,得到的返回值全部放回map工厂中,map工厂可以被转换成列表查看到 每一个被函数处 ...

  4. gulp4.0构建任务

    执行default任务时,依次执行以下任务 gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']); 报错:Task function ...

  5. 个人电脑公网IPv6配置

    一.前言 自己当时以低价买的阿里ECS云服务器马上要过期了,对于搭建个人博客.NAS这样服务器的需求购买ECS服务器成本太高了,刚好家里有台小型的桌面式笔记本,考虑用作服务器,但是公网IPv4的地址实 ...

  6. day02-功能实现01

    家具网购项目实现01 1.项目开发环境搭建 创建一个web项目,添加需要的jar包(暂不使用Maven) 依照5.1的表格来创建项目的大体分层: 2.功能01-搭建前端页面 2.1需求分析/图解 2. ...

  7. 服务器迁移遇到的bug

    目前有个客户做了个下单系统,系统运行了太多的扩展了,但是又没有文档,我就想着能不能把服务器打包成镜像,然后用新服务直接使用?? 事实是完全OK的.服务器用的阿里云. 但是遇到一个bug,我目前还没解决 ...

  8. (数据科学学习手札147)Python GIS利器shapely全新2.0版本一览

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,我写过很多篇介绍geopand ...

  9. java逻辑运算&&与&的区别

    本文主要阐述&&(短路与)和&(逻辑与)的运算异同:a && b 和 a&b : 共同之处是只有a和b同时为真时,结果才为真,否则为假 不同点在于 a ...

  10. 基于Java的高并发多线程分片断点下载

    基于Java的高并发多线程分片断点下载 首先直接看测试情况: 单线程下载72MB文件 7线程并发分片下载72MB文件: 下载效率提高2-3倍,当然以上测试结果还和设备CPU核心数.网络带宽息息相关. ...