Pdfjs第三方插件使用
项目中时常会遇到在线预览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第三方插件使用的更多相关文章
- zabbix通过第三方插件percona监控mysql数据库
zabbix通过第三方插件percona监控mysql数据库 ...
- iOS 开发:利用第三方插件来安装CoCoapods
引言:通过上一篇博客我们知道了怎么样去通过终端来安装CoCoapods,这一篇我们着重与用第三方插件来安装CoCoapods: 1. 首先在提下链接下载插件 https://github.com/ka ...
- 苹果下如果安装nginx,给nginx安装markdown第三方插件
用brew install nginx 这样安装的是最新版的nginx, 但是在有些情况下,安装第三方插件需要特定的版本,更高一级的版本可能装不上. 它的原理是下载安装包进行自动安装,建立软链,这样就 ...
- ThinkPHP自动获取关键词(调用第三方插件)
ThinkPHP自动获取关键词调用在线discuz词库 先按照下图路径放好插件 方法如下 /** * 自动获取关键词(调用第三方插件) * @return [type] [description] * ...
- iOS 学习笔记 十 (2015.04.03)xcode第三方插件
1.xcode第三方插件,存放路径:~/Library/Application Support/Developer/Shared/Xcode/Plug-ins
- zatree第三方插件
Zabbix安装第三方插件zatree2.4.5 1.下载zatree第三方插件https://github.com/spide4k/zatree.git 2.检查PHP环境需要支持php-xml.p ...
- [iOS 10 day by day] Day 1:开发 iMessage 的第三方插件
本文介绍了 iOS 10 的一个重要更新:Messages 应用支持第三方插件了.作者用一个小游戏作为例子,说明了插件开发从建工程开始,到绘制界面.收发消息的全过程. <iOS 10 day b ...
- ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...
随机推荐
- 【微服务架构设计实施】第一部分:架构篇-1:微服务架构与Spring Cloud介绍
〇.概述 一.微服务架构与Spring Cloud (一)概念 不同说法:细粒度的.清凉组件化的小型SOA(面向服务架构) 统一说法:小型应用程序(服务组件),使用轻量级设计方法和HTTP协议通信 理 ...
- before-after-hook钩子函数
before-after-hook 最近看别人的代码,接触到一个插件,before-after-hook,百度搜一圈也没有看到什么地方有教程,看这个字面意思是一个hook,和axios里面的拦截器,v ...
- YonBuilder移动开发平台功能大盘点
YonBuilder是面向企业组织和个人开发者的低代码开发平台,实现无代码.低代码.专业代码开发三种模式.提供元数据驱动和画布构建两种开发方式,通过点击拖拽+自动化代码生成和移动多端编译的技术,与开放 ...
- asp+vb.net解决调接口返回中文乱码问题
1.问题描述 涉及语言:vb,vbscript,vb.net,asp 最近在工作中碰到了这样一个问题:需要调用一个接口解析简历文件中的关键信息.直接用postman测试该接口,接口返回值没问题,但一旦 ...
- M.2 SSD固态硬盘上安装windows问题
近来M2硬盘大降价,笔记就趁便宜买了一个2T的M.2固态硬盘,插在笔记本上,接下来安装win11,本想以前安装多次,也是老手了,没想到遇到很多问题,一度陷入僵局,不过最终还是安装成功了,下面记录下安装 ...
- 温故知新 - 靶机练习-Toppo
今天闲来无事,重新做了一下以前做过的第一个靶机(https://www.cnblogs.com/sallyzhang/p/12792042.html),这个靶机主要是练习sudo提权,当时不会也没理解 ...
- (三)elasticsearch 源码之启动流程分析
1.前面我们在<(一)elasticsearch 编译和启动>和 <(二)elasticsearch 源码目录 >简单了解下es(elasticsearch,下同),现在我们来 ...
- Socket爬虫:Python版
简述:较为底层的爬虫实现,用于了解爬虫底层实现的具体流程,现在各种好用的爬虫库(如requests,httpx...等)都是基于此进行封装的. PS:本文只作为实现请求的代码记录,基础部分不做过多阐述 ...
- Creator 2.x 升级 3.x 基础 API 差异总结
上一篇我们介绍了 Cocos Creator 2.x 项目升级 3.x 的大流程. 但最后一步,还需要手动将之前 2.x 写的函数注释一处处的放开. 并将 2.x 的代码写法改成 3.x 的,下面我们 ...
- Maven项目中导入坐标依赖时报(Failure to transfer....)的错的问题
Maven项目中导入坐标依赖时报(Failure to transfer....)的错的问题 今天在做Spring MVC的一个项目时导入坐标依赖的时候突然网断了一下(村里网络日常不稳定),然后就 ...