在浏览器中直接打开PDF

xuexiaodong20092023-11-26 23:38

1 使用iframe标签

html 复制代码

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

如果PDF是base64参考如下

html 复制代码

<iframe id="pdfView" width="100%" height="100%" allow="fullscreen" type="application/x-google-chrome-pdf" frameborder="0" src="data:application/pdf;base64,">
</iframe>

2 使用 object 标签

html 复制代码

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

如果PDF是base64参考如下

html 复制代码

<object id="pdfView" width="100%" height="100%"  type="application/pdf" data="data:application/pdf;base64,">
</object>

3 使用embed标签

html 复制代码

<embed id="pdfView" src="all.pdf#toolbar=1" type="application/pdf" width="100%" height="100%" />

这种我进行了测试如果是base64的好像不行

这几种方式都可以通过在src属性之后添加参数控制PDF预览的显示效果

例如：

html 复制代码

<embed id="pdfView" src="all.pdf#toolbar=1&navpanes=1&view=FitH&page=2" type="application/pdf" width="100%" height="100%" />

toolbar=1 显示工具栏；toolbar=0,不显示工具栏

navpanes=1显示左侧导航；navpanes=0,不显示左侧导航

view=FitH 适配宽度，view=FitV适配高度

page=2 默认显示第2页

前端展示 PDF 预览的几种方法