现在的浏览器基本都支持直接把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. OGG学习笔记02

    实验环境:源端:192.168.1.30,Oracle 10.2.0.5 单实例目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1.模拟源数据库业务持续运行 2.配置OGG前 ...

  2. 密码基础知识(2)以RSA为例说明加密、解密、签名、验签

    密码基础知识(1)https://www.cnblogs.com/xdyixia/p/11528572.html 一.RSA加密简介 RSA加密是一种非对称加密.是由一对密钥来进行加解密的过程,分别称 ...

  3. 如何处理Win10电脑黑屏后出现代码0xc0000225的错误?

    有些Win10系统的用户反映电脑在开机的时候突然变成黑屏,还出现提示0xc0000225的错误代码,不知道该怎么去解决.一般来说,遇到这种情况一般是系统的注册表出现了问题.下面就为大家分享一下相应的解 ...

  4. ubuntu版本信息查看

    1.cat /etc/issue 2.cat /etc/lsb-release 3.uname -a 4.cat /proc/version 5.lsb_release -a 显卡信息1.lspci ...

  5. Django简介及安装

    Django简介及安装 我们都知道,Django是一种基于Python的Web开发框架. 那么,什么是Web开发?Web开发指的是开发基于B/S架构,通过前后端的配合,将后台服务器的数据在浏览器上展现 ...

  6. 设置本地cookie 存session 保持长期有效

    <?php session_start(); // 启动Session $_SESSION['count']; // 注册Session变量Count isset($PHPSESSID)?ses ...

  7. python网络编程:socket半连接池、UDP通讯模板

    一.TCP半连接池原理 二.UDP通讯 三.UDP聊天 四.UDP聊天2 五.UDP会粘包吗 六.UDP总结 七.UDP与TCP对比 一.TCP半连接池原理 客户端 import socket cli ...

  8. JS 四种条件控制语句

    // 1.if...else if (true) { console.log("TRUE1"); } else { console.log("TRUE2"); ...

  9. 10分钟搭建Kubernetes容器集群平台(kubeadm)

    官方提供Kubernetes部署3种方式 minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环境 ...

  10. poj3417 Network/闇の連鎖[树上差分]

    首先隔断一条树边,不计附加边这个树肯定是断成两块了,然后就看附加边有没有连着的两个点在不同的块内. 方法1:BIT乱搞(个人思路) 假设考虑到$x$节点隔断和他父亲的边,要看$x$子树内有没有点连着附 ...