Javascript - avoid download file by browser when preview is failing

Question

I am using quasar-framework with vue and I am binding an object propertie to embed a document in a iframe after the user clicks the link which redirects to the path of the file. I don't want to fix the one that is not showing me the file I just want to solve the following:

Is there any way to prevent the browser from downloading by default a selected file to be viewed embedded in an iframe when it can not be displayed?

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

The file.content_url contains: "http://10.20.60.30:5010/files/1/content/"

I need to control this because when I load the new route (then File.vue is loaded) the browser downloads the file with the name 'content' and I want to avoid this and that from that new route the user can download or not the file through a button (which works).

Answer 1

You should use the tag object instead of iframe for embedding documents. If the browser can't render the document embedded inside object , it will not force the download and nothing will be displayed.

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

Source:

• HTML embedded PDF iframe