前言

　　本文介绍在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. HDU 2546 饭卡（01背包）

    题目代号:HDU 2546 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2546 饭卡 Time Limit: 5000/1000 MS (Java/ ...

  2. （63）通信协议之一json

    1.什么是JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使 ...

  3. linux下面用Mingw编译libx264

    linux下面用Mingw编译libx264 首先要先安装好mingw 我用的是Ubuntu 编译ffmpeg的时候 ,官方上面有一个自动化脚本能够把mingw安装好 这里就不说了 新版本的libx2 ...

  4. tensorflow 分布式搭建

    https://blog.csdn.net/qq_40652148/article/details/80467131 https://yq.aliyun.com/articles/602111 git ...

  5. Jest 里面需要注意的几个小细节

    概述 最近学 jest ,有一些细节记录下来,供以后开发时参考,相信对其他人也有用. import 提升 ES6 的 import 会自动提升到文档前面,所以下面的 import 会提升到前面. le ...

  6. redis 管理工具

    1.redis studio 2.redis desktop manager

  7. C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib,该怎么解决

    C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib如标题,在窗体中添加Windows Media Player 控件,当调 ...

  8. Linux监控命令之==>free

    一.命令说明 free 命令显示系统内存的使用情况:包括物理内存.交换内存(swap)和内核缓冲区内存 二.参数说明 -b -k -m -g:分别以字节.KB.MB.GB为单位显示内存使用情况 -l: ...

  9. 数据科学家人才危机现象，是FOMO还是Silver？

    数据科学家人才危机现象,是FOMO还是Silver? 数据科学家的人才短缺和薪水高涨已经达到了顶板,未来还会持续下去吗? 在过去几年中,高级分析(#大数据#分析)空间一直经历着严重的FOMO(害怕错过 ...

  10. VS2012下std::function的BUG解决办法

    VS2012版本下std::function存在问题,链接:https://stackoverflow.com/questions/13096162/stdfunction-not-compiling ...