简介

PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.

PDF.js is community-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs.

开源地址：https://github.com/mozilla/pdf.js

下载后不能直接使用，需要重新构建，不熟悉将会非常麻烦

构建好的程序包：http://cnblogs.com/files/xiangliuyunyang/build.zip

如果你想自己动手，看看这篇http://blog.csdn.net/hyhbyl/article/details/20994945

示例

引用文件，直接复制下文可以直接使用

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>课程详情</title>

    <style type="text/css">

    </style>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="~/Scripts/plugins/pdfjs/pdf.js"></script>

    <script src="~/Scripts/plugins/pdfjs/pdf.worker.js"></script>

    <script type="text/javascript">

        var var_filepath = decodeURIComponent("@filepath");//不能跨域

        var var_win_height = $(window).height();

        $(document).ready(function () {

            resetPlayerSize();

        });

        $(window).resize(function () {

            resetPlayerSize();

        });

        function resetPlayerSize() {

            var_win_height = $(window).height();

            $(".tmPlayer").css({ "height": var_win_height + "px" });

        }

    </script>

</head>

<body style="margin: 0;overflow: hidden">

    <div id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"></div>

    <script type="text/javascript">

        $('.tmPlayer').html('<iframe frameBorder="0" scrolling="no" src="/Scripts/plugins/pdfjs/generic/web/viewer.html?file=' +

            var_filepath +

            '" style="width:100%; height:100%;"></iframe>');

    </script>

</body>

</html>

参考：http://www.cnblogs.com/xiangliuyunyang/p/5956453.html

HTML5在线预览PDF的更多相关文章

  1. WEB在线预览PDF

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

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

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

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

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

  4. 网页嵌入pdf、在线预览pdf工具及插件（转）

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

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

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

  6. 在线预览PDF

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

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

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

  8. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  9. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...

随机推荐

  1. 网络编程基础【day09】：socket接收大数据（五）

    本节内容 1.概述 2.socket接收大数据 3.中文字符的坑 一.概述 上篇博客写到了,就是说当服务器发送至客户端的数据,大于客户端设置的数据,则就会把数据服务端发过来的数据剩余数据存在IO缓冲区 ...

  2. 翻译二--创建一个Web测试计划

    这里主要是翻译jmeter官方文档第4章:创建一个基本的测试计划来测试一个网站.你将创建5个用户来发送请求给两个页面,同时,你将告诉用户去执行两次测试.所以,请求的总和是5(users)*2(requ ...

  3. 能使 Oracle 索引失效的六大限制条件【转】

    . 引用自: http://www.cnblogs.com/orientsun/archive/2012/07/05/2577351.html  总结得非常到位 Oracle 索引的目标是避免全表扫描 ...

  4. Maccms8.x 命令执行漏洞分析

    下载链接https://share.weiyun.com/23802397ed25681ad45c112bf34cc6db 首先打开Index.php $m = be('get','m'); m参数获 ...

  5. 当php邂逅windows通用上传缺陷

    早上逛乌云发现了PKAV大牛的一篇文章,针对php和windows文件上传的分析,思路很YD,果断转之与大家分享. 虽然此文可能有许多的限制条件,但是如果你认真阅读会发现,其实还是比较实用的. 另外一 ...

  6. golang etcdclientv3使用说明

    clientv3.New() 创建连接 config = ec.Config{ Endpoints: []string{"10.0.0.5:2379"}, //连接的etcd集群地 ...

  7. LGV 算法 (Lindström–Gessel–Viennot lemma)

    e(ai,bi)为从起点ai到终点bi的方案数.以上矩阵行列式结果就是(a1,a2,...an) 到 (b1,b2,...bn) 的所有不相交路径的种数. 具体证明的话看wiki,比较长.. 这个定理 ...

  8. python保存文件到数据库

    效果 model class WEIGUI_IMG(Base): __tablename__ = 'DW_ZHS_D_WEIGUI_IMG' # 表名 id = Column(), primary_k ...

  9. mosh

    mosh 是一款使用 UDP 连接 C/S 的终端工具, 服务器只需安装好 mosh 套件, 并启动 SSH 服务, 等待 Client 连接即可. Client (mosh-client) 连接时, ...

  10. 【Django】不知道为什么就是想学一下 01

    1. Django安装.项目创建及服务器连接 系统:Ubuntu 14.04.4 > cat /etc/issue //查看系统版本 安装Django > sudo pip install ...