Javascript - 避免在预览失败时通过浏览器下载文件

Question

我将 quasar-framework 与 vue 结合使用，并且在用户单击重定向到文件路径的链接后，我绑定(bind)了一个对象属性以将文档嵌入到 iframe 中。我不想修复没有向我显示文件的问题我只想解决以下问题:

有什么方法可以防止浏览器在无法显示时默认下载嵌入在 iframe 中的要查看的选定文件？

<iframe id="content_iframe" v-bind:src="file.content_url" style="width:100%; background-color: gray" frameborder="0" scrolling="no"></iframe>

file.content_url 包含:"http://10.20.60.30:5010/files/1/content/"

我需要控制它，因为当我加载新路由(然后加载 File.vue)时，浏览器会下载名称为“content”的文件，我想避免用户可以从新路由下载这个和那个或者不是通过按钮(有效)的文件。

Answer 1

您应该使用标签 object 而不是 iframe 来嵌入文档。如果浏览器无法呈现嵌入在 object 中的文档，则不会强制下载并且不会显示任何内容。

<object width="400" height="400" data="FILE_URL" type="FILE_CONTENT_TYPE">
    <embed src="FILE_URL" type="FILE_CONTENT_TYPE" />
</object>

来源:

• HTML embedded PDF iframe