HTML网页在线预览PDF文件

image.png

image.png

今日工作需要，需要在线预览PDF文件，so,做了个研究，下面将网页在线预览pdf的方法做个梳理，大家共同学习成长吧

方法分为三种

1. 方法1-embed标签

![image.png](https://upload-images.jianshu.io/upload_images/17970101-541be7f2feb0c557.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2. 方法2-iframe标签

![image.png](https://upload-images.jianshu.io/upload_images/17970101-4cfd684c7a8c789e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3. 方法3-jquery.media.js插件

这里要说明一点，jquery.media.js的版本一定要看好，网上比较乱，下载的版本不对的话是无法正常预览的

需要直接拿去，复制链接自己ctrl+S保存在本地就行啦，拿去不谢

<script type="text/javascript" src="[http://quzhenzhen.cn/src/jquery.media.js](http://quzhenzhen.cn/src/jquery.media.js)"></script>

<script type="text/javascript" src="[http://quzhenzhen.cn/src/](http://quzhenzhen.cn/src/jquery.media.js)jquery-3.2.0.min.js"></script>

![image.png](https://upload-images.jianshu.io/upload_images/17970101-0ed859d1c96d9092.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![image.png](https://upload-images.jianshu.io/upload_images/17970101-c050b52411b80fb4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

image.png