现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件。但是不同的浏览器显示的页面不一样。如果我们想在网页上统一预览pdf怎样实现呢?

Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。使用方法:

1. PDF.js 可以在官网上下载:http://mozilla.github.io/pdf.js/

2. 解压到目录pdf,再把整个目录拷贝到网站的public目录下。解压后是这样的:

3. 我们可以使用pdf.js自带的预览界面viewer.html,只需传入pdf文件的url即可。

如果要打开一个pdf文件,直接这样写就可以了:

<a href="/pdf/web/viewer.html?file=file.pdf">Open</a>

如果想在弹窗打开:

window.open('/pdf/web/viewer.html?file=file.pdf','PDF','width:50%;height:50%;top:100;left:100;');

好了,代码测试通过!!

参考链接:

https://www.cnblogs.com/lixiuke/p/10141982.html

https://blog.csdn.net/u014701246/article/details/75221810

前端使用pdf.js预览pdf文件,超级简单的更多相关文章

  1. 前端使用pdf.js预览pdf文件

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

  2. [pdf.js]预览pdf时,中文名称乱码的问题

    在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...

  3. 使用pdf.js预览实现读取服务器外部文件

    不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...

  4. pdf.js 预览文件中文内容丢失

    问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示 在浏览器控制台发现有报错 发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径 再次 ...

  5. js预览PDF的插件(亲测支持IE9,火狐,等等)

    aspx文件 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible ...

  6. 网页上预览pdf文件的几种方案

    网页上查看pdf的方案: 1.使用adobe reader的插件 2.使用在线office控件 3.使用火狐开源项目pdf.js(浏览器需支持html5) 4.将pdf转换为swf文件 5.使用pdf ...

  7. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

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

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

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

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...

随机推荐

  1. kbmMW 5.09.00是个必须升级的版本!

    这几天遇到的几个问题,从5.08.10升级到5.09.00,自然解决了! 所以建议大家都升级到这个版本. 例如我遇到的问题: 1.在线程中使用ClientQuery注意的问题 2.Invalid pr ...

  2. EF 将MSSQL 更换成 POSTRESQL

    前提概要:项目里已存在MSSQL 的 DB FIRST 的EDMX, 想将项目的数据库转换成 POSTGRESQL. 解决方法: 1,新建项目, 连接MSSQL 建立模型,用来源于数据库 CODE F ...

  3. ZooKeeper--动物管理员

    复杂的软件集群系统从来绕不开高可用.负载均衡等问题,大数据系统更是如此. 高可用:计算机系统的可用性定义为系统保持正常运行时间的百分比,具体手段有自动检测,自动切换,自动恢复等. 负载均衡:主要解决单 ...

  4. linux 进程优先级 调度 nice pri

    转:http://www.linuxidc.com/Linux/2016-05/131244.htm 深入 Linux 的进程优先级 [日期:2016-05-11] 来源:liwei.life  作者 ...

  5. Bootstrap常用的自带插件

    Bootstrap自带的那些常用插件. 模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态 ...

  6. iptables实现内外网端口映射及转发上网

    前两天在工作中遇到一个需求,某192.168.1.0/24内网网段内只有一台主机A连接到了公网,A的两块网卡分别有一个公网地址(123.234.345.456)和一个内网地址(192.168.1.10 ...

  7. 文件浏览:ls&file

    文件浏览主要完成的功能是列出当前目录或指定目录下文件的文件名称以及一些基本的资料. Linux的命令是区分大小写的. 1.  ls:列出当前目录(默认)或指定目录下所有文件,并按字典序排序 语法:ls ...

  8. php is_numeric函数可绕过产生SQL注入

    老老实实mysql_real_escape_string()防作死......is_numeric的SQL利用条件虽然有点苛刻,但还是少用的好= = 某CTF中亦有实测案例,请戳 http://dro ...

  9. QTP(10)

    一.VBS语言基础 1.运算符和表达式 (1)运算符 (2)表达式 a.数学表达式:由算术运算符连接,计算结果为数字 b.字符串表达式:由字符串连接符连接,计算结果为字符串 c.条件表达式:由关系运算 ...

  10. Tunnel Warfare HDU - 1540 (线段树处理连续区间问题)

    During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...