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使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
第十二节 类的自动加载 [12]
2006/10/09 PHP
php curl模拟post请求小实例
2013/11/13 PHP
PDO::exec讲解
2019/01/28 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python的列表List求均值和中位数实例
2020/03/03 Python
keras 读取多标签图像数据方式
2020/06/12 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
参观接待方案
2014/03/17 职场文书
开学寄语大全
2014/04/08 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书