用pdf.js实现在移动端在线预览pdf文件
用pdf.js实现在移动端在线预览pdf文件
1、下载pdf.js
官网地址:https://mozilla.github.io/pdf.js/

2、配置
下载下来的文件包,就是一个demo,仿照这个demo做就可以
(1)页面元素如下:
<button class="product-term to-clause" id="noteDetail">test</button>
<button class="to-clause" id="clauseDetail">testxxx</button>
(2)js代码如下:
$('#clauseDetail').click(function () {
window.open('../viewer.html?file=xxx-clause.pdf');
});
注意:viewer.html就是下载下来文件包中的那个viewer.html,在此html中需要引入viewer.css、
locale.properties、pdf.js和viewer.js。修改viewer.js中的以下代码:
var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';修改为 var DEFAULT_URL = '';
需要预览的pdf文件,就是window.open('../viewer.html?file=xxx-clause.pdf');中的xxx-clause.pdf文件。
注意:pdf文件需要和viewer.html放在同一个目录下,如果不在同一个目录下,需修改路径。
通过以上的配置,就可以在线预览pdf文件了
用pdf.js实现在移动端在线预览pdf文件的更多相关文章
- pdf.js 使用实例(app直接预览pdf格式的文档)
pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责 ...
- WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
- pc或者微信上用pdf.js在线预览pdf和word
最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...
- 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
#网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
- #网页中动态嵌入PDF文件/在线预览PDF内容#
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
- 网页嵌入pdf、在线预览pdf工具及插件(转)
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
- FlexPaper+SWFTool+操作类=在线预览PDF
引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
- 在线预览PDF
FlexPaper+SWFTool+操作类=在线预览PDF 引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf ...
- FlexPaper+SWFTool+操作类=在线预览PDF(转)
引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
随机推荐
- python获取文件所在目录
1.执行的python程序获取自己文件所在目录 import os,sys os.chdir(sys.path[0]); dir_name = os.path.abspath(os.path.join ...
- 阿里云服务器Linux CentOS安装配置(11)安装Wordpress
下载wordpress安装包 wget https://cn.wordpress.org/wordpress-4.8.1-zh_CN.zip unzip wordpress-4.8.1-zh_CN.z ...
- 自学stm32的一些个人经验
1.首先我们先看看与STM32相关的文档 我们假定大家已经对STM32的书籍或者文档有一定的理解.如不理解,请立即阅读STM32的文档,以获取最基本的知识点. 如果你手上拥有ST官方主推的STM32神 ...
- 2. Scala变量
2.1 变量是程序的基本组成单位 举一个简单的例子 object boke_demo01 { def main(args: Array[String]): Unit = { var a: Int = ...
- SharePoint使用jsom查询当前用户信息
前置环境:sharepoint 'use strict'; var context = SP.ClientContext.get_current(); var user = context.get_w ...
- python 数据分析算法(决策树)
决策树基于时间的各个判断条件,由各个节点组成,类似一颗树从树的顶端,然后分支,再分支,每个节点由响的因素组成 决策树有两个阶段,构造和剪枝 构造: 构造的过程就是选择什么属性作为节点构造,通常有三种节 ...
- IDEA中创建maven项目后解决main文件夹下目录不全的问题
IDEA创建maven-archetype-webapp项目的时候,创建完成后发现在main文件夹下没有java,resource等源文件夹. 解决方法: 1.选择File->Project S ...
- 学习h264 的语法规则,如何才能看懂H264 的官方文档
1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...
- 如何查看端口recv和send
1.进入到pod的宿主机 一般来说 ssh slaveX 2.查看进程号 top可以看到 3.执行命令 nsenter --target 10594 --net netstat -an
- 【HBase】-NO.140.HBase.1 -【HBase】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...