Vue 使用 embed 标签实现在线查看PDF

2022-10-09 10:17:39

项目需求：在线查看PDF文档，同时还需要记录查看时长。 如果只是单纯查看，可以使用 window.location.href 方法更新浏览器地址栏即可查看。但这样 Vue 就无法实现监听了。之前在项目中使用过 vue-pdf 组件，用于查看PDF文档，但因此组件前端无法解决跨域问题，此方法又被舍弃了。
最终选择了使用 标签的形式，可以实现与第一种方法相同的效果，又能满足项目需求，在组件内实现监听。

具体使用方法如下
<!-- PDF在线查看弹窗 --><CommonDialog:title="pdfDialog.title":dialogVisible="pdfDialog.dialogVisible":showClose="pdfDialog.showClose":width="pdfDialog.width":top="pdfDialog.top"@dialogCancel="dialogCancel"><embed:src="`${pdfData.src}#toolbar=0&navpanes=0&scrollbar=0`"type="application/pdf"width="100%"height="520px;"/></CommonDialog>

注：

  1. 设置 标签的 type=“application/pdf”
  2. 设置 宽、高
  3. 配置 src - toolbar、navpanes、scrollbar 用于设置操作状态栏是否显示
  • 作者：BradyCC
  • 原文链接：https://blog.csdn.net/BradyCC/article/details/106434875
    更新时间：2022-10-09 10:17:39