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).
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: