html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件
最近遇到一个需求,要在html页面查看pdf生成的pdf文件!
翻来覆去找到两种办法 ,最后采用了jquery.media.js插件
方式一
将pdf转为图片保存,然后再把图片的地址发到页面进行显示。
遇到的困难,pdf转为图片时中文可能会乱码!
缺点:生成图片会占用服务器内存。
方式二
通过js插件在线预览pdf (这里推荐第3中插件)
js插件有三种
1 pdf.js
下载地址
https://github.com/mozilla/pd...
提供两种使用方式
PDF.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件,非常强大,能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。
感兴趣请查看这篇博客
https://www.cnblogs.com/zhang...
缺点
官网项目文件过多,不太容易理解。看着头就大!
pdfobject.js
使用教程 http://www.jq22.com/jquery-in...
缺点
pdfobject.js 对浏览器有要求,可能出现不能加载pdf文件,今天我的谷歌浏览器上死活无法显示pdf文件无赖又换了其他的。
可能会报错
not allow to load resource
3 jquery.media.js
简单轻量,引入js 然后加载路径即可。
使用教程 http://www.jq22.com/jquery-in...
下载地址
jquery.media.rar(解压密码:www.crowsong.xyz): http://waternote.ctfile.net/f...
用法如下:
使用方法
引用所需两个文件
使用方法
首先要引入js文件
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script>
其次添加页面加载完毕后需要执行的js代码,以预览PDF为例:
<script type="text/javascript">$(function() {$('a.media').media({width:'100%', height:900px;});});
</script>
最后添加HTML代码:
<div class="panel-body"><a class="media" href="/2883353877031485959.pdf"></a>
</div>
将插件中HTML页面中的a标签下href改为想要的pdf地址即可。
html中在线预览pdf文件之pdf在线预览插件相关推荐
- html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
- 在html页面中展示pdf文件,实现在线阅读
参考文章:1.http://blog.csdn.net/broze/article/details/6743314 2.http://www.pdfobject.com/ ...
- php中嵌入pdf文件,使用Base64在PHP中附加PDF文件(Appending PDF Files in PHP with Base64)
使用Base64在PHP中附加PDF文件(Appending PDF Files in PHP with Base64) 我有一系列我想合并在一起的base64 PDF文件. 目前我正在使用file_ ...
- php 集成 pdf.js,JavaScript_js插件方式打开pdf文件(浏览器pdf插件分享),两种方案:一种直接链接,把p - phpStudy...
js插件方式打开pdf文件(浏览器pdf插件分享) 两种方案:一种直接链接,把pdf文件当作img文件,类似这种形式,这样链接: 另一种:使用js插件哈. 其中实现阅读pdf文件的js插件很多,比如: ...
- 如何将多个PDF文件合并为一个PDF文件?PDF文件合并教程
如何合并PDF文件?PDF我们都不陌生,很多人经常在网站上搜狐各种类型的PDF资料,但是有时因为资料太多不好管理和查阅,如果可以把同类型的多个PDF文件合并为一个PDF文件,那无论是保存还是查阅,都会 ...
- Latex图表制作:关于EPS文件转PDF文件及PDF裁剪自动化的Shell脚本制作
关于EPS文件转PDF文件及PDF裁剪自动化的Shell脚本制作 前言 一.EPS文件转PDF文件 1. 过去的科研绘图方案 2. 未来的科研绘图方案 二.使用步骤 1. 单例操作 a. 安装epst ...
- 如何编辑PDF文件,PDF怎么旋转页面并保存
在编辑PDF文件的时候总会遇到各种各样的问题,编辑PDF文件是需要用到PDF编辑器的,在使用PDF文件的时候,有时文件的页面不是正常显示的,怎么将文件的页面旋转呢,不会的话,就一起看看下面的文章,了解 ...
- 怎么编辑PDF文件,PDF去水印的方法
随着PDF文件使用的越来越多,PDF文件的修改也是大家常常谈论到的话题,在编辑文件的时候需要使用PDF编辑器,那么,文件中如果有水印,想要删除水印怎么去操作呢,是不是也有很多的小伙伴想知道怎么删除的, ...
最新文章
- linux 如何下载svn插件安装,Linux SVN服务端安装和eclipse svn插件配置
- NWERC2020J-Joint Excavation【构造,贪心】
- html网页距离顶部50像素,HTML5 教程之CSS Padding(填充)
- 小米全球第二,雷军签发内部嘉奖令;亚马逊被欧盟处以创纪录的8.88亿美元罚款;​PyCharm 2021.2 发布|极客日报...
- Jenkins部署java项目实例
- 《一切皆是映射:代码的本质》哈希算法 (Hash)
- conda install 等价与pip install -e .
- 漫谈基础工业软件开发
- 程序设计基础流程图以及进制的介绍
- Linux文件夹加密、解密
- 云虚拟主机bch 和 云服务器bcc,云虚拟主机bch和云服务器bcc
- Android View 获取焦点
- python七段数码管显示学号_python小实例——七段数码管绘制
- PCB板的线宽、铜厚度,与通过的电流对应的关系,一文看懂!
- PCBA加工波峰焊空焊原因及对策
- Stata | 简单操作2(display)
- Mendix敏捷开发零基础学习《三》-高级 (数据删除保护机制、数据关联删除、Security安全、调用外部接口、调用JAVA代码)
- 统一调度平台V2.0
- vue 计数器_Vuex实现计数器以及列表展示效果
- ABB AC500 系列 PLC 与上位机iFix 的通讯配置
热门文章
- python遍历树结构_python 数据结构与算法——树的遍历
- python可选参数定义_c#教程之定义可选参数
- 5kb大小的云洗衣机HTML源码 朋友圈在线洗衣服
- 曼格短视频小程序V1.8.5版本完整源码
- 一套漂亮的Bootstrap模板
- 全网最新Spring Boot2.5.1整合Activiti5.22.0企业实战教程<UEL表达式篇>
- Vue使用Element-ui按需引入大坑
- 深入了解ASP.NET运行内幕
- petshop4.0 详解之一(系统架构设计)(转载)
- 发生一个未处理的异常 脚本调试 错误号2912