用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. Vue使用中常见问题

    1.安装sass时报未找到 1.原因应该同时安装:1.npm install --save-dev sass-loader    2.npm install --save-dev node-sass ...

  2. 版本管理_svn_检出_更新_提交_本机 MAC 地址_冲突

    版本管理 git svn [subversion] 实现集中式的版本控制工具软件 来源于最初的工程图纸. 需求: 备份还原 协同修改 权限控制 弊端:集中式(管理方便,但是如果中心服务器瘫痪,整个开发 ...

  3. java学习(五)--- 方法

    方法的定义 修饰符 返回值类型 方法名(参数类型 参数名){ ... 方法体 ... return 返回值; } 注意:非void方法必须有返回值 方法重载: 可以声明方法相同,但是参数类型不同的方法 ...

  4. 关于在IE浏览器中使用控件问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  5. XenServer多网卡绑定

    xenserver通过 XenCenter可以绑定网卡,支持Active-Active和Active-Standby的模式,但是通过Xencenter只能绑定两块网卡为一组.更多的比如3块一组.4块一 ...

  6. PHP Xdebug + PhpStorm调试远程服务器代码

    1.服务器(linux centos)安装xdebug pecl install xdebug 注意看安装完成之后会显示 debug.so 的路径,记录下来 2.配置 php.ini如果不知道php. ...

  7. cve-2018-4878漏洞复现

    CVE-2018-4878Flash 0day漏洞1.漏洞概述2018年2月1号,Adobe官方发布安全通报(APSA18-01),声明Adobe Flash 28.0.0.137及其之前的版本,存在 ...

  8. 如何把原生小程序项目合并的mpvue项目中

    当时的情景是这样的: 使用mpvue写微信小程序,写着写着项目写到一半了,突然间不想这样继续写了,想切换回原生小程序语法去写剩余部分. 如下图,红色框里的功能是已经用mpvue完成的功能,绿色框部分的 ...

  9. css table之合并单元格

    colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...

  10. mysql查询两个日期之前相隔的天数

    select timestampdiff(SECOND,'2011-09-25 23:23:13','2011-09-26 22:23:11'); 其中SECOND同样可以改为HOUR,MINUTE