4

我正在 Vue 中构建一个非常简单的组件来以模式预览 PDF 文件和图像。

我正在使用Vue Boostrap 的模态组件。在模态的正文中，我有以下行：

<embed :src="fileSrc" type="application/pdf" height="100%" width="100%">

fileSrc是组件接收的道具。

当模式启动时，PDF 可视化工具不显示，谷歌浏览器发出警告说：

此页面上的 Flash 已被阻止

在此处输入图像描述

我已允许在页面上显示 Flash，但仍然无法正常工作。

如果我删除该type="application/pdf"属性并且它fileSrc是一个 JPEG 文件，它会显示得很好。

在此处输入图像描述

我也尝试过<object>没有运气的标签。

我应该检查什么？我错过了什么？

编辑：为什么这个问题不是重复的？

因为我不能使用<embed>标签来支持 PDF 和图像进行预览。此页面中的示例在没有启用 Flash 且没有警告的情况下工作，因此我应该能够重现此行为。

4

1 回答 1

2

我找到了答案。

我试图显示的文件<embed>正在上传到 AWS S3 中的存储桶。上传文件时（使用 PHP 脚本），Content-Type需要根据文件（即application/pdfPDF 文件）相应地设置元数据。

这些文件是使用默认值上传的，因此浏览器一旦放置在标签Content-Type中就不知道如何处理它（用于确定选择显示哪个插件）。<embed>Content-type

我发现这种方法很容易实现为通用文件预览器。

于 2018-11-12T01:16:26.683 回答