我正在 Vue 中构建一个非常简单的组件,以在模态中预览 PDF 文件和图像。
我正在使用 Vue Boostrap's modal component 。在模态的正文中,我有以下行:<embed :src="fileSrc" type="application/pdf" height="100%" width="100%">
fileSrc
是组件接收的 prop。
当模式启动时,PDF 可视化工具不会显示,谷歌浏览器会发出警告说:
我已允许在页面上显示 Flash,但仍然无法正常工作。
如果我删除 type="application/pdf"
属性并且 fileSrc
是一个 JPEG 文件,它会显示得很好。
我也尝试过使用 <object>
标签,但没有成功。
我应该检查什么?我错过了什么?
编辑:为什么这个问题不是重复的?
因为我不能使用 <embed>
标签来支持 PDF 和图像预览。 this page 中的示例在没有启用 Flash 且没有警告的情况下工作,所以我应该能够重现这种行为。
最佳答案
我找到了答案。
我尝试使用 <embed>
显示的文件正在上传到 AWS S3 中的存储桶。上传文件时(使用 PHP 脚本),需要根据文件设置 Content-Type
元数据(即 PDF 文件的 application/pdf
)。
这些文件是使用默认的 Content-Type
值上传的,因此一旦将其放入 <embed>
标签(Content-type
用于确定选择显示哪个插件),浏览器就不知道如何处理它。
我发现这种方法作为通用文件预览器非常容易实现。
关于html - 谷歌浏览器在使用 <embed> 和 PDF 文件时提示闪存,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53200488/