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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python os模块常用方法和属性总结
2020/02/20 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
交通事故赔偿协议书
2014/10/16 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Django模型层实现多表关系创建和多表操作
2021/07/21 Python