前言

　　本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法。

实现步骤

  • 下载 pdfjs 并引入项目中

　　到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs插件包，注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。

  • 使用方法

　　在 iframe 标签中使用。假设 pdfjs 包放在目录 ../static 下。则写法如下：

<iframe id="previewpdf" src=""../static/pdfjs/web/viewer.html?file="+url+"#page=1" width="100%" frameborder="0"></iframe>

其中，src中的url是pdf文件的预览地址、page是设置pdf打开时从第一页开始显示。

  • 样例
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>pdf文件预览</title>

        <script src="../javascript/jquery-2.2.4.js"></script>

        <script type="text/javascript">

            $(function () {

                var url = getPdfPreviewUrl(); //获取pdf预览地址

                $("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1");

            });

        </script>

    </head>

    <body>

        <div id="showPdf">

            <iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>

        </div>

    </body>

</html>

使用pdfjs插件在线预览PDF文件的更多相关文章

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

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

  2. linux在线预览pdf文件开发思路

    准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ...

  3. jquery在线预览PDF文件，打开PDF文件(向下兼容ie8、ie7)

    最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  4. SpringBoot在线预览PDF文件（引用pdf.js工具）

    本项目Demo使用了PDF.js插件实现PDF在线阅读功能PDF.js插件下载地址 实测能用! 1.创建SpringBoot项目,目录结构如下: 2.进行项目配置: pom.xml: <proj ...

  5. 四十二、在线预览pdf文件

    //文档在线观看 checkWoc(type, id, taskId, smsId, stsId) { if(type == "zip" || type == "7z&q ...

  6. php在线预览pdf文件

    话不多说,直接上代码 <?php public function read_pdf($file) { if(strtolower(substr(strrchr($file,'.'),1)) != ...

  7. 文档控件NTKO OFFICE 详细使用说明之预览PDF文件（禁止打印、下载、另存为、防抓包下载）

    1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...

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

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

  9. 前端实现在线预览pdf、word、xls、ppt等文件

    最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...

随机推荐

  1. 【canvas学习笔记四】绘制文字

    本节我们来学习如何绘制文字. 绘制文字有两个主要的方法: fillText(text, x, y [, maxWidth]) 在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制 ...

  2. vue 渲染是出现 Do not use built-in or reserved HTML elements as component id 的警告

    情况1.是因为组件命名和引入不一致造成的. 命名组件(nav) export default { name: 'nav', data () { return { } } 引入组件(Navigation ...

  3. （45）FreeRTOS学习之二

    一:架构概述 FreeRTOS是一个相对较小的应用程序.最小化的FreeRTOS内核仅包括3个(.c)文件和少数头文件,总共不到9000行代码,还包括了注释和空行.一个典型的编译后(二进制)代码映像小 ...

  4. [design pattern](4) SImple Factory

    前言 本博客主要介绍简单工厂模式(Simple Factory),简单工厂模式是创建型模式的一员,也是我们平时coding用到的比较多的一个模式了. 思考题 首先,让我们思考以下的需求: 博主,突然很 ...

  5. 【2019个推开发者节】亿级日活APP都在用的个推SDK, 现在全部免费！

    1024程序员节来了 双11近了 各路满减.折扣.领券.秒杀.集赞 营销玩法猛于虎,一看优惠两毛五 日常拼命赶"需求" 修"Bug"的开发者们 想找个好用又不贵 ...

  6. docker 容器不能联网

    Unknown Endpoint: Inaccessible host: `dynamodb.us-east-1.amazonaws.com' 别慌!Docker容器内不能联网的6种解决方案 注:下面 ...

  7. 搜索引擎算法研究专题七：Hilltop算法

    搜索引擎算法研究专题七:Hilltop算法 2017年12月19日 ⁄ 搜索技术 ⁄ 共 1256字 ⁄ 字号 小 中 大 ⁄ 评论关闭   HillTop也是搜索引擎结果排序的专利,是Google工 ...

  8. Controller控制台Vuser虚拟用户的运行状态

    Controller控制台Vuser运行的状态 Down:没有运行Pending:挂起Init:初始化Ready:准备就绪Run:正在运行Rendezvous:正在集结Passed:运行通过Faile ...

  9. maven setting.xml文件配置详情

    1 首先,setting.xml一般存在与两个地方:maven的安装目录/conf/,和${user.home}/.m2/下.他们的区别是在maven安装目录下的setting.xml是所有用户都可以 ...

  10. 网易云课堂_C++程序设计入门(下)_第7单元：出入虽同趣，所向各有宜 – 文件输入和输出_第7单元 - 作业2：编程互评

    第7单元 - 作业2:编程互评 查看帮助 返回   提交作业(剩余10天) 完成并提交作业     作业批改 互评训练   互评作业   自评作业     成绩公布 查看成绩   由于在线编程不支持 ...