前端如何不引入第三方插件实现pdf预览功能?

雨中的风铃子2024-12-04 17:12

HTML 提供了一些原生标签，如embed、object和iframe，可以直接嵌入PDF文件，并在网页中展示。本文以object标签为例（其余标签感兴趣的，网上直接搜，有很多）

.vue文件

bash 复制代码

<object ref="pdfRef" :data="`${attachUrl}#toolbar=0`" type="application/pdf" width="100%" height="1000">
        This browser does not support PDFs. Please download the PDF to view it: <a :href="curData.agreementAttachUrl">Download PDF</a>
      </object>

attachUrl指的是pdf链接，如果在pdf链接后加入【#toolbar=0】，那么pdf上方的工具栏就会隐藏，可根据需求自行添加，默认是有工具栏