在线预览PDF方式

62 阅读1分钟

1、embed标签

<embed src="/test.pdf" type="application/pdf" width="100%" height="500px">

2、object标签

<object data="/test.pdf" type="application/pdf" width="100%" ></object>

3、iframe标签

<iframe src="/test.pdf" height="900px;" width="800px"></iframe>

4、a标签

<a href="/test.pdf"></a>

5、pdfjs(mozilla.github.io/pdf.js/)

  • 官网下载插件工程项目包

image.png

  • 将包下build、web文件夹放到项目public路径下(可新建一层文件夹存放,如本项目是放到pdf下)。

image.png

  • 使用方式

一、使用iframe调用(好处是预设好了许多功能及样式)

image.png

二、自定义视图,不使用自带界面。引入build下所有JS文件,根据文档提供的api方法实现。(待深入了解)

注:embed、object标签移动端兼容性不好。a标签在不同游览器上行为不一致,有的直接下载,有的直接打开预览。pdfjs兼容性较好,部署时注意iis配置文件web.config加上pdf项目工程重定向。

image.png