Display PDF in browser when Content-Disposition is set to attachment - javascript

I need to display PDF in browser. The URL of pdf that I'm displaying comes from a server that I do not own. In the response header that service sets 'Content-Disposition' header as 'attachment' and because of that when I open that URL in browsr window it immediately starts downloading instead of displaying.
I want to show this PDF in the browser instead of downloading it but this 'Content-Disposition' header is not letting me do that. Is there any way I can download the contents of PDF and then show it in browser? or use some kind of library to do that?
I tried using pdfobject.com but it is having issues with displaying this URL as well. ( I tried changing the code to display PDF where content-disposition header was not set and that worked)

Related

Can you open a pdf in a new browser tab without setting Content-Disposition from backend

The idea is we have a file generated from the backend and we want to display it in the browser in a new tab
We used to have an anchor tag like
<a href={documentUrl} target="_blank" </a>
Where the file was sent with "Content-Disposition:inline" as part of the header
now Content-Disposition is gone because the backend wants the frontend to manage whether to open the file in a new tab or download it
is this possible? Preferably without using window.open or grabbing the blob data - using just the file url
Edit: it's opening a new tab but then a pop up appears requesting where to download the file it doesn't actually present the file in the new tab

Javascript Check whatever link is download link or webpage link

It there anyway to check link whatever is a download link like http://ipv4.download.thinkbroadband.com/5MB.zip
or normal web like open https://www.google.com
Currently I am using Electron and want to check if link is download link it will download and not open new browser but if not it will open in browser window
Make an HTTP request and check the Content-Type and (if it is there) Content-Disposition headers.
If Content-Disposition says it is an attachment, then it is a download. If it says it is inline, then it is intended to be displayed in the browser window.
If Content-Disposition isn't specified, then you'll need to make the decision based on the MIME type. e.g. text/html should probably be shown in the browser window.
May be check the end of the link... if it ends with .zip .jpg .pdf .... it is a file.
Or .html ... it is a page.

HTML Object data URL from dynamic source

So all uploads for my app are not stored in my web server space, they are stored in a file system storage. When my users want access to the file they call a URL and the backend process will buffer the data to the browser via the HttpServletResponse outputstream. This works great as intended for downloading a file. Now my use-case has a scenario where I need to load an embedded object using this same method.
I am essentially loading a preview of the PDF file in the browser. This works fine if the PDF is stored on the web server and I provide a direct URL to the file. But when I use my method of sending files to the user then it doesn't work.
<object data='"+pdfUrl+"' type='application/pdf' width='160px' height='160px' />
If i put pdfURL into a browser my file gets downloaded no problem. So I think the issue is the HTTP headers I am sending in the outputstream that maybe is preventing the Object from loading properly. I am not sure if maybe its expecting something specific to be set in order to trigger loading the file
I am currently using very basic headers as follows:
BufferedInputStream is = <Some File Inputstream>;
resp.setContentType(new MimetypesFileTypeMap().getContentType(directory+filename));
resp.setHeader("Content-Disposition", "attachment; filename="+StringFormatHelper.formatFileName(filename));
bufferedCopy(is, resp.getOutputStream());
is.close();
resp.getOutputStream().flush();
Anyone have any ideas on what I have to change to get the data to properly load in the Object tag? I don't get any errors in the JS console or server side. I am not sure how to debug this issue.
Edit:
SO i just realized that if i right click on where the blank Object tag is at I have the option to "Save as..." and when I do I download the PDF. So the pdf data is loaded but Its just not displaying in the UI.
The issue is this line of code
resp.setContentType(new MimetypesFileTypeMap().getContentType(directory+filename));
This was not setting the correct mime-type for the file as I thought it was. So there was a mismatch in that the Object tag was looking for application/pdf but the server was sending a different MIME type in the header. Once I matched them up everything worked.
I was able to get the correct MIME type using the Spring provided lookup instead of the JDK lookup
new ConfigurableMimeFileTypeMap().getContentType(directory+filename)

i want to save and access a pdf file from browser cache

i am using iframe to show pdf file from server, i want to focus different pages in it, by passing the page parameter like a.pdf#page=5, but when i do this, it downloads the complete pdf from the server and then puts focus to page 5, how can i avoid this.
Ideally i want it to load from cache, can anyone help me out? thanks
Remove page=5. That is used to make the PDF plugin move to page 5. If you don't use it, the PDF page 1 will be displayed.
if the PDF is served from a server under your control, you can set the expires date of the header of the response to a far off date in the future, and send an etag (say, the hash of the pdf contents). Then, when ever you attempt to serve the PDF from the server, check that the request's etag header is set, and if it is, compare it with the hash of the PDF file, and if it is equal, send a 304 not modified status code (instead of the actual content). That should cause the browser to load it from cache if it exists.

in javascript how can I detect if a browser will display or download a pdf?

Say I have:
a webpage with an iframe: <iframe src="" style="display:none;"></iframe>
an URL pointing to a PDF document: http://www.example.com
some javascript that will do iframe.src = pdfurl
a button that will trigger such javascript
if the browser is going to display the PDF inline, the button will
say "view pdf" and when clicked will make the iframe visible
otherwise it will say "download pdf"
I found a way to detect whether the pdf has been loaded in the iframe: reading iframe.contentDocument.contentType after onload has fired, but
this won't allow me to display the correct button
onload does not fire if the file is being downloaded
Thanks :)
To tell the client's browser to download a response as a file, set the Content-Disposition HTTP header to 'attachment' in your response. This is no guarantee, but it's the proper method of telling the browser how to handle the content.
ยง 8.9.1.6 PDF viewing support
window.navigator.pdfViewerEnabled
Returns true if the user agent supports inline viewing of PDF files when
navigating to them, or false otherwise. In the latter case, PDF files
will be handled by external software.
MDN web docs article.
Browser compatibility table
In modern Browsers, JavaScripts global Navigator object has a plugins property, filled with an array of Plugins, if you can find a Plugin for Mimetype application/pdf, you can safely assume that the browser will display pdf files inline, as long as the server does not explicit send content-disposition: attachment headers, of course.
You could send a HEAD request to that resource and check what Content-Type and Content-Disposition values are being sent back. Based on these information you could determine whether a browser would display or download that resource.

Categories