用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. CSS,浮动及其影响

    浮动(float): 让默认文档流(标准文档流)下的元素漂浮起来,水平排列. 通俗点来说,浮动可以让元素浮到第二层,而其他没有浮动的元素就往上排,而我们是俯视去看的,所以往上顶的那个元素就会被遮住,这 ...

  2. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

  3. HTML5冲刺

    html5特性及知识点 1.新标签1)div语义不强,针对结构部署,提供了以下新标签nav/main/header/footer/article/asideie9将把以上元素全部解析为行内元素,引入第 ...

  4. tp5 查询单个字段的值

    $num_lastday = Db::name('test_wx') ->where('num','=',$data['num']) ->order('time desc') ->l ...

  5. 目录的rwx权限的意义

    1.目录的r:列举查看目录下的内容 2.目录的w:向目录中写东西,如创建文件 3.目录的x:可以cd进去 例:查看/etc/passwd内容: `:对/有rx权限 `:对/etc/有rx权限 `:对/ ...

  6. ssh 免密登录

    一,单机秘密登录 进入/etc/ssh 文件夹 编辑sshd_config 文件(sshd_config是ssh 服务端文件,ssh_config是客户端文件) sudo vi sshd_config ...

  7. HDFS的WEB页面访问常见问题

    HDFS的WEB UI管理页面 50070 端口 无法访问解决办法! 本文基于HADOOP-3..1.0,Cecntos7.0环境下进行测试,所以遇到很多新鲜的问题: 特别注意:HaDoop3.0之前 ...

  8. Lecture5_1&5_2.随机变量的数字特征(数学期望、方差、协方差)

    一.数学期望 1.离散型随机变量的数学期望 设X为离散随机变量,其概率分布为:P(X=xk)=pk 若无穷级数$\sum_{k=1}^{+\infty}x_kp_k$绝对收敛 (即满足$\sum_{k ...

  9. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

  10. service order

    1: SRVO Service Order         compress: 本地部署,客户能够看到后台代码,transaction type,改代码等.   SVO1 Service Order  ...