前言

　　本文介绍在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. vue几种简单的传值方式

    除了一下的几种方式外,可以参考 https://www.cnblogs.com/hpx2020/p/10936279.html 组件传值的方法: 一.父组件向子组件传递数据(props) 第1:父组件 ...

  2. 程序员心髓：移动应用API设计10大技巧

    移动App与基于Web/云服务发生对话是很常见的事情,最简单的可能仅仅只是检索数据,但也可能包含发送数据.用户授权和管理.而这也就验证了为移动应用建立API的重要性,为此,我们特总结了10大移动API ...

  3. 百度编辑器ueditor上传图片失败，显示上传错误，实际上图片已经传到服务器或者本地

    报错,上传失败,图片没有显示,且调试response没有信息,但是图片已经上传到了本地 这个问题是因为ueditor里面的Upload.class.php里面__construct()方法里面的ico ...

  4. iOS自动化--Spaceship使用实践

    Spaceship ### 脚本操作 证书,app,provision等一些列apple develop后台操作,快速高效. github地址 spaceship开发文档 文档有列出常用的api调用d ...

  5. Hook exe 和 file

    c#拦截程序的运行 EasyHook  + win7 64位 LocalHook.GetProcAddress("Kernel32.dll", "CreateProces ...

  6. 十九、RF接口测试汇总（一）

    搭建项目:转自  http://chuansong.me/n/1858477 A.请求方式为get请求 方式一:导入RequestsLibrary库,get request    [ alias | ...

  7. 一、Robotframework安装步骤

    1.安装python并验证安装成功 a.安装python-2.7.14.amd64------默认路径安装即可 b.添加环境变量path:C:\Python27; C:\Python27\Script ...

  8. orm练习题

    表关系图 models.py from django.db import models # Create your models here. class Teacher(models.Model): ...

  9. Octavia 的 HTTPS 与自建、签发 CA 证书

    目录 文章目录 目录 Octavia 为什么需要自建 CA 证书? GenerateServerPEMTask CertComputeCreate Amphora Agent AmphoraAPICl ...

  10. QT Desinger设计窗体应用程序框架

    目录 目录 前言 系统软件 QT Designer Using QT Designer Open QTDesigner Tool Widget Box QT Designer的布局 属性栏 示例 i ...