用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 ...
随机推荐
- (56)Wangdao.com第八天_JavaScript 流程控制语句
流程控制语句 条件判断语句 if 条件分支语句 switch 循环语句 for .while switch 和 if 都可以相互转换,switch 的性能更优于 if 1. 条件判断语句 if 在某条 ...
- Ehcache 3.7文档—基础篇—JCache aka JSR-107
一. 概述JCache Java临时缓存API(JSR-107),也被称为JCache,它是一个规范在javax.cache.API中定义的.该规范是在Java Community Process下开 ...
- yii 1.x 添加 rules 验证url数组
public function rules() { return CMap::mergeArray( parent::rules(),array( array('third_link', 'urlAr ...
- 基于hortonworks的大数据集群环境部署流水
一.ambari及HDP安装文件下载地址: 1.系统 操作系统:CentOS7 2.软件 本次安装采用最新版本: ambari-2.7.0.0 hdp-3.0.0.0 详细信息及下载地址如下: Amb ...
- XenServer多网卡绑定
xenserver通过 XenCenter可以绑定网卡,支持Active-Active和Active-Standby的模式,但是通过Xencenter只能绑定两块网卡为一组.更多的比如3块一组.4块一 ...
- oracle DML语句 事务的定义与特点
1.insert into (插入数据) insert in to 表名(列表1,列表2) values(要插入的数据1,数据2); or insert into 表名 values(数据 ...
- python中一个py文件如何调用其他py文件中的类和函数
HelloWorld 文件名称 Hello是类 from HelloWorld import Hello >>> h = Hello() >>> h.hello ...
- 转 linux安装jdk环境(多种方式)
linux系统通用安装通过tar.gz压缩包安装此方法适用于绝大部分的linux系统 1.先下载tar.gz的压缩包,这里使用官网下载. 进入: http://www.oracle.com/techn ...
- Java如何获取JSON数据中的值
场景:在接口自动化场景中,下个接口发送的请求参数,依赖上个接口请求结果中的值.需要将获取值作为全局参数引用. import java.io.File; import java.io.FileInput ...
- uCOS-II
/****************************************************/ **关于移植,ucos官网上给的有template,主要思想是实现任务切换的两个函数(任务 ...