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

Question

我在vue中使用类框架，并且在用户单击重定向到文件路径的链接后，将对象属性绑定到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>

资源：