HTML5在线预览PDF的示例代码


Posted in HTML / CSS onSeptember 14, 2017

简介

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

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

构建好的程序包:build_3water.rar

示例

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

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 #HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 #HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 #HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 #HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 #HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 #HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 #HTML / CSS
You might like
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php5.3 注意事项说明
2013/07/01 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
php优化查询foreach代码实例讲解
2021/03/24 PHP
公司培训欢迎词
2014/01/10 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
蓝颜请假条
2014/04/11 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
话题作文之自信作文
2019/11/15 职场文书
python神经网络ResNet50模型
2022/05/06 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers