前言

　　本文介绍在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. Selenium 多表单(frame/iframe)切换

    frame标签有frameset.frame.iframe三种,frameset跟其他普通标签没有区别,不会影响到正常的定位,而frame与iframe需要切换进去才能定位到其中的元素 比如下面这个网 ...

  2. linux下vsftpd的安装及配置使用详细步骤(推荐)

    vsftpd 是“very secure FTP daemon”的缩写,安全性是它的一个最大的特点. vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行在诸如 Linux.BS ...

  3. Comparable接口与Comparator接口的比较————总结

    之前的两篇文章主要学习了Comparable接口和Comparator接口的学习.既然已经学习完了,现在就趁热打铁,进行总结吧! Comparable接口和Comparator接口的共同点: 1. 都 ...

  4. 二分类算法的评价指标：准确率、精准率、召回率、混淆矩阵、AUC

    评价指标是针对同样的数据,输入不同的算法,或者输入相同的算法但参数不同而给出这个算法或者参数好坏的定量指标. 以下为了方便讲解,都以二分类问题为前提进行介绍,其实多分类问题下这些概念都可以得到推广. ...

  5. rsync aws ec2 pem

    How to use aws ec2 pem http://www.anthonychambers.co.uk/blog/rsync-to-aws-ec2-using-.pem-key/9 方法如下: ...

  6. C# Socket-TCP异步编程原理详解附源码

    目录 目录异步原理主要方法源码Server源码:Client源码实验效果(广播为例)参考博客 TOC 异步原理 套接字编程原理:延续文件作用思想,打开-读写-关闭的模式. C/S编程模式如下: Ø 服 ...

  7. 梯度、Hessian矩阵、平面方程的法线以及函数导数的含义

    本文转载自: Xianling Mao的专栏 =========================================================================== 想 ...

  8. ES6数组内对象去重

    这个数组去重转自https://www.cnblogs.com/caideyipi/p/7679681.html, 就当笔记记录: 去重Set const arr = ['张三','张三','三张三' ...

  9. DAY 1模拟赛

    DAY1 杨溢鑫小姐姐出题 好毒瘤啊 T1 低仿机器人 (robo,1s,64M) 题目描述 自从 Dji 推出 robomaster S1 机器人过后,小文就一直缠着爸爸想要一个机器人.没想到爸爸最 ...

  10. web开发中会话跟踪的方法有哪些

    会话跟踪就是浏览器和服务器通信 1.cookie 2.session 3.隐藏input 4.url重写 5.ip地址