html中非插件实现pdf预览【PC+H5】

这里只考虑非插件以外的方法，插件可以参考pdf.js

1. iframe标签

<iframe src="/file/read?file=aaa&type=upload" width="100%" height="800px">iframe>

经测试，chrome正常显示，firefox不能显示，H5不能显示。

2. object标签

<object data="/file/read?file=aaa&type=upload" type="application/pdf" width="100%" height="450">
     <a class="pdfdownload" target="_blank" href="/file/download?file=aaa&type=upload">点击查看场景详情介绍a>
object>

data 属性指定 PDF 文件的路径，type 属性标识文件类型为 PDF。如果未显示 object 元素，就会执行位于 和 之间的代码。因此，当浏览器无法加载该object标签时，用户就可以通过a标签提供的链接下载文件。
经测试，chrome正常显示，firefox不能显示，H5不能显示。

3. embed标签

<embed src="/file/read?file=aa&type=upload" type="application/pdf" height="460" width="100%">

经测试，chrome正常显示，firefox正常显示，H5可以显示【但尚未真机测验过】。

4.a标签点击预览pdf

//该接口1 后端设置Content-Disposition为attachment
<a target="_blank" href="/file/download?file=aaa&type=upload">点击查看场景详情介绍a>
//该接口2 后端没有特别设置Content-Disposition
<a target="_blank" href="/file/read?file=aaa&type=upload">点击查看场景详情介绍a>

对于接口1，经真机测验，在H5移动端中，部分浏览器，如chrome、safari、firefox可以实现点击a标签预览pdf文件；但部分浏览器，如qq浏览器、微信内置浏览器会弹出下载pdf文件的提示。
但在pc中则均默认为下载pdf。

原因：
1.h5部分浏览器可以实现pdf预览，部分浏览器则弹窗提示下载，可能的原因是前者这些浏览器中内置了pdf预览插件
2.pc中均默认为下载，与请求头中的Content-Disposition有关。

content-type 指示响应内容的格式。

content-disposition 指示如何处理响应内容。

根据请求的路径不同，后端给请求头的Content-Disposition设置了不同的值，当值为attachment时，表示将响应内容作为附件下载；为inline时【默认值】，表示它可以显示在网页内，或作为网页，此时浏览器会自动进行预览。