简介

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. Hadoop记录-hive merge小文件

    1. Map输入合并小文件对应参数:set mapred.max.split.size=256000000;  #每个Map最大输入大小set mapred.min.split.size.per.no ...

  2. Web项目发布的一些设置

    比如我们有个项目想要发布到互联网上,我们首先需要购买域名以及主机,主机的话,推荐云主机(本人推荐西部数码或者阿里云),性能好: 我们先在云主机上搭建环境,比如Mysql,Jdk,Tomcat: 然后我 ...

  3. 转---Python——numpy　random类

    numpy中利用random类获取随机数． numpy.random.random() 生成随机浮点数 默认为生成一个随机的浮点数,范围是在0.0~1.0之间,也可以通过参数size设置返回数据的si ...

  4. vue cli 解决跨域 线上 nginx 反向代理配置

    前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...

  5. HTTP访问控制（CORS）

    当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求.   比如,站点 http://domain-a.com 的某 HTML 页面通过 <img ...

  6. 【python小练】0013

    第 0013 题: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-) 科科...妹子就算了,大晚上的爬点吃的吧.食物图集:抿一口,舔一舔,扭一扭~·SCD 写个简单的爬图爬虫 ...

  7. Bootstrap 使用

    bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.c ...

  8. Docker exec 宿主对容器执行命令 - 五

    Docker  下  exec  从宿主机对容器执行命名操作 docker exec -it # 交互可以进入容器 ; exec 也可以在宿主机对容器执行命令: docker attach # 也是可 ...

  9. Docker 操作记录

    Docker docker info 查看信息 docker 更改镜像目录 方式:1.配置文件修改 # cat /etc/sysconfig/docker |grep -v ^# |grep -v ^ ...

  10. 第27月第25天 clang -rewrite-objc main.m

    1.clang -rewrite-objc main.m #import <objc/runtime.h> #import<objc/message.h> #import &l ...