用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文件的更多相关文章

  1. pdf.js 使用实例(app直接预览pdf格式的文档)

    pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责 ...

  2. WEB在线预览PDF

    这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...

  3. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  4. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  5. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  6. 网页嵌入pdf、在线预览pdf工具及插件(转)

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  7. FlexPaper+SWFTool+操作类=在线预览PDF

    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...

  8. 在线预览PDF

    FlexPaper+SWFTool+操作类=在线预览PDF   引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf ...

  9. FlexPaper+SWFTool+操作类=在线预览PDF(转)

    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...

随机推荐

  1. GMA Round 1

    学弟说我好久没更blog了. 因为自己最近其实没干什么. 所以来搬运一下GMA Round 1 的比赛内容吧,blog访问量.网站流量一举两得. 链接:https://enceladus.cf/con ...

  2. Junit/idea Junit支持/Spring test之间的孽世纠葛

    最近应老板要求,研究研究Spring测试相关的东西,力求搞一个方便使用的测试工具,对于一个Spring不熟Junit不懂的人这是一个很大的坑,扫了一边spring test文档没感觉有什么收获,spr ...

  3. CentOS7 64位安装mysql教程

    参考链接:http://baijiahao.baidu.com/s?id=1597184796823517712&wfr=spider&for=pc https://www.cnblo ...

  4. 20175320 2018-2019-2 《Java程序设计》第6周学习总结

    20175320 2018-2019-2 <Java程序设计>第6周学习总结 教材学习内容总结 本周学习了教材的第七及第十章的内容.在这两章中介绍了接内部类与异常类以及输入.输出流,第七章 ...

  5. 如何从日期对象python获取以毫秒(秒后3位小数)为单位的时间值?

    要在python中,要获取具有毫秒(秒后3位小数)的日期字符串,请使用以下命令: %f 显示毫秒 import datetime # 获得当前时间 now=datetime.datetime.now( ...

  6. python pip 安装模块步骤

    在线安装,cmd输入 命令:pip install mysql-connector-python 注:直接在默认路径下输入

  7. std unorder_map insert 和 emplace的区别

    std::unordered_map<int, int > map; map.insert(std::make_pair(, )); map.insert(std::make_pair(, ...

  8. mysql数据库的查询,添加,删除,还原,备份

    18章数据mariadb数据库 1.setup 配置网卡centos6.52.nmtui 网卡图形配置界面3.yum install mariadb mariadb-server4.systemctl ...

  9. pc端字体大小计算以及echart中字体大小计算

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. mysql扩展性架构实践N库到2N 库的扩容,2变4、4变8

    mysql扩展性架构实践N库到2N 库的扩容,2变4.4变8 http://geek.csdn.net/news/detail/5207058同城 沈剑 http://www.99cankao.com ...