前端使用pdf.js预览pdf文件,超级简单
现在的浏览器基本都支持直接把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文件,超级简单的更多相关文章
- 前端使用pdf.js预览pdf文件
现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...
- [pdf.js]预览pdf时,中文名称乱码的问题
在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...
- 使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
- pdf.js 预览文件中文内容丢失
问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示 在浏览器控制台发现有报错 发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径 再次 ...
- js预览PDF的插件(亲测支持IE9,火狐,等等)
aspx文件 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible ...
- 网页上预览pdf文件的几种方案
网页上查看pdf的方案: 1.使用adobe reader的插件 2.使用在线office控件 3.使用火狐开源项目pdf.js(浏览器需支持html5) 4.将pdf转换为swf文件 5.使用pdf ...
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- 前端实现在线预览pdf、word、xls、ppt等文件
最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...
- 前端实现在线预览pdf、docx、xls、ppt等文件
思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...
随机推荐
- PyCharm 创建指定版本的 Django (超详细图解)
最近在学习胡阳老师(the5fire)的<Django企业级开发实战>,想要使用pycharm创建django项目时,在使用virtualenv创建虚拟环境后,在pycharm内,无论如何 ...
- Delphi 使用Tabel组件的记录查找
樊伟胜
- kubernetes资源配置之ReplicaSets
什么是ReplicaSets? ReplicaSet的目的是维护在任何给定时间运行的稳定的副本Pod集. 因此,它通常用于保证指定数量的相同Pod的可用性 ReplicaSets怎么样工作? Repl ...
- goaccess安装和使用
安装依赖 $ sudo apt-get install libncursesw5-dev $ wget https://github.com/maxmind/geoip-api-c/releases/ ...
- grub命令行和配置文件配置配置信息
一.grub简介 GNU GRUB(简称“GRUB”)是一个来自GNU项目的启动引导程序.GRUB是多启动规范的实现,它允许用户可以在计算机内同时拥有多个操作系统,并在计算机启动时选择希望运行的操作系 ...
- 记录weblogic12c通用版本在windowsXP上安装报异常的问题:java.lang.NoClassDefFoundError:
先上图: 这个可能有经验的人一眼就看出问题了,报这个错的原因是:我把安装包放在了中文目录下,本来以为安装包放在中文目录下无关紧要,但是weblogic12c就是这么神奇,不能放在中文目录下. 解决方法 ...
- 项目管理工具!DevExpress Winforms Gantt控件 v19.2强势来袭
DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...
- nginx.conf文件的使用
默认配置语法 全局---服务级别的配置 user 设置nginx服务的系统使用用户,基本上不用动 worker_processes 工作进程数---跟nginx多worker有关,增大连接数的并发处理 ...
- Prism框架中View与Region关联的几种方式
Prism.Regions命名空间下有2个重要接口:IRegionManager.IRegion IRegionManager接口中的方法与属性:AddToRegion().RegisterViewW ...
- 【Python之路】异步IO
线程:CPU基本执行单元,可以与同属一个进程的其他线程共享资源,线程是属于进程的. 进程:资源单元,进程一般由程序.数据集.进程控制块三部分组成.一个进程默认有一个主线程, GIL:用于在进程中对所有 ...