用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. js面向对象关键点

    函数加new 工作流程: (1) 创建一个新对象: => var this = new Object(); (2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) : (3) ...

  2. GMA Round 1 新程序

    传送门 新程序 程序框图如图所示,当输入的n=时,输出结果的ans是多少? 容易看出该程序求n以内质数个数,50以内有15个. 定位:简单题

  3. 解析Json文件

    一: /** * 把json文件读取到内存中 * * @throws IOException */ public String getFile(String filePath) throws IOEx ...

  4. es6 ...克隆与函数深度克隆

    es6的...运算, 可以进行一层的深度克隆; 在多层的情况下,不要用这种啊. 用深度克隆函数,或者JSON.parse(JSON.stringify(obj)),但json方式要求不能有属性值是函数 ...

  5. Selenium 3 学习小结

    4个类+常用的46个方法 从以下知识内容对selenium 3自动化框架进行初步学习: 1.安装selenium pip install selenium pip list 2.驱动.关闭浏览器 首先 ...

  6. CSP201312-4 有趣的数【dp】

    问题描述 试题编号: 201312-4 试题名称: 有趣的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 我们把一个数称为有趣的,当且仅当: 1. 它的数字只包含0, 1, ...

  7. 解决 AutoMapper ProjectTo 不起作用的问题

    这两天在一个 ASP.NET Core 项目中遭遇了 AutoMapper ProjectTo 不起作用的奇怪问题,虽然在 ProjectTo 中指定了 DTO ,但 EF Core 生成的 SQL ...

  8. 12生成器,send,推导式

    # 1.生成器的本质就是迭代器 # 2.通过函数变成一个生成器 # def func(): # print(1) # yield 5 # 我的函数走到这了 # print(2) # yield 9 # ...

  9. .NET中的泛型集合总结

    最近对集合相关的命名空间比较感兴趣,以前也就用下List<T>, Dictionary<Tkey, TValue>之类,总之,比较小白.点开N多博客,MSDN,StackOve ...

  10. eclipse maven工程打包失败

    报错如下: Maven install失败 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:comp ...