Async document download in browser - html

We have a web app with html pages 1>2>3
Page 2 has a link to download a pdf - I've used an anchor tag in the form to do this. The response is of type application/pdf. If I wait on page 2 my pdf eventually shows as downloaded, however I want to be able to move to page 3 with the pdf download happening asynchronously...
I can get the server to do it but as soon as I request page 3 the browser (Chrome) shows the GET request (for the pdf) as status: (canceled) :-(
I've tried both HTTP Request and AJAX Request (type: document and xhr) any suggestions?
So far I can only get it to work when the request is in a new tab - but that's not what I want as the pdf is downloaded and not opened in the new tab.

If your app is SPA, you can create an iframe and set src attribute with the download url.
If it is not SPA, and you used anchor <a> tag then use target="_blank" attribute to download it from a new window in which case, new tab will open and starting the download and the tab will be closed by letting the download happened in the background so that you can change anything on the main page.

If you want to download rather than show the pdf, I'd look into getting the server setting the http response header
Content-Disposition: attachment; filename="yourname.pdf"
so the browser should suggest "save as" and open a dialog to choose the save location - the download will usually continue running when navigating away from the page where the download was initiated.
I'm sorry I have no idea if you can achieve this purely on the browser side.

Solution to my problem was to get access to the HttpServletResponse (server side), set the header content type ("application/pdf") and disposition ("attachment;filename='...'") and flush the outputStream.
This must happen ahead of writing the PDF byte array to the outputStream.
The above allowed the browser to show my PDF download as 'started' and I could then navigate away from that page while the download continued.

Related

Why does an IP address request result in an HTML document in the browser?

import requests
ip = requests.get("https://ifconfig.io/ip").content
print(ip)
if i run this code the output is b'1.1.1.1\n'
but if i press f12 on the actual page i can see there's an html code.
so what's happening exactly? why i don't recive the html stuff like <head>, <body> and other thing, and why it's in byte?
i also tried to download the page (just pressing ctrl+s) and i downloaded a .txt file with only written 1.1.1.1
What you're seeing is a side-effect of the web browser's dev tools. When examining a web page using dev tools, the browser shows its "fixed up" DOM instead of the raw HTML returned by the server. This may include closing HTML tags which were not properly closed, or in your case, the browser creates and injects its own HTML template for styling the text/plain HTTP response. Printing the document.body from the console shows the styling applied:
<body><pre style="word-wrap: break-word; white-space: pre-wrap;">[IP]
</pre></body>
Whereas right-clicking the page and selecting "View Source" shows just the IP address.
Don't rely on the Elements tab in the dev tools if you want to see the literal response from the server. Instead you can go to "Sources" and select the page, Network > Response for the correct HTTP request, View Source, or use curl (although there's no guarantee that the server won't change the response based off the user-agent).
The element inspector in your browser shows a represention of the document that the browser has built to show you the contents of the text file.
It does not show you the page source.
If you load an HTML document it wouldn't show you the page source either, it would show you a representation of the document after error recovery, normalisation and JavaScript had been applied.
See view-source:https://ifconfig.io/ip for the actual source code of the page.

How to fix 403 error while displaying images from google drive?

I am displaying around 20 thumbnail images at a time from google drive using the following link syntax, the thumbnail links are stored in a database and are grabbed using ajax POST request. I am testing this on localhost and every time i clear the cache and reload i get a 403 no response from server error on at least a few images. The images are public and are made accessable to anyone and visiting the link manually opens the image every time.
Heres the link i use:
"https://lh3.googleusercontent.com/d/" + imgid + "=s500?authuser=0"
Why are you using this link to get the files?
Try to get one of the links in the File resource:
webContentLink Link for downloading the content of the file in a browser. This is only available for files with binary content in Google Drive.
webViewLink Link for opening the file in a relevant Google editor or viewer in a browser.
iconLink Static, unauthenticated link to the file's icon.
thumbnailLink A short-lived link to the file's thumbnail, if available. Typically lasts on the order of hours. Only populated when the requesting app can access the file's content.
Choose one of the attributes that best fit your needs after that. Make the necessary request
GET https://www.googleapis.com/drive/v3/files/<yout-file-id>?fields=webContentLink&key=[YOUR_API_KEY] HTTP/1.1
Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json
After that you can use your retrieved link to show the image.
There is on person having your problem if you want to look over the final result of the img tag.

How to embed local HTML file to existing GWT page

I have a page that is constructed by GWT, when the page get loaded, I will display some required content in it. And then if user click a certain button on the page, I will send request to server side and server will return me a HTML file(a chart generated by jquery plotting tool) stored in local directory, I need to display this HTML file into the existing GWT page's certain widget.
I tried to use Frame in GWT to link to the local HTML file and display it, it get failed, googled and found it's because of browser security setting.Please share your thought, any idea is appreciated.

How to force a refresh on a URL that it was previously a download link?

We can force a refresh doing Ctrl+F5 or Shift+F5 on a loaded page.
There is a way to bypass the cache on a download link?
Keep in mind that a download link opens on a new tab that suddently disappears.
Initially I had a route that was a download link. When I change that route to be just a page, the browser keeps executing the old download. So I don't know how to clear the cache for that URL.
Imagine you develope a download-file response on http://example.com/download.
And one day you change this response to show a page with just some information.
If you have already download the file, the browser remembers this response.
I've tried to clear just the 'browsing history' for that site, but it didn't work.
If I don't want to clear the whole browsing data, which kind of data should I clear to make the browser forgets the old response?

Block default chrome Downloader

I'm writing a download manager app for Linux so I use a chrome extension to add listener to all download links in page and and when a download link clicked link send to a native app. everything is ok but I want to prevent show default chrome save dialog when download links clicked . how? thank you.
A quite limited approach to intercept single-clicked links would be to inject a content script with:
window.addEventListener("mousedown", interceptFunction); // intercept mouseclicks
window.addEventListener("keydown", interceptFunction); // intercept Enter key on a link
The interceptFunction would check if the link is likely to be a downloadable file judging by the url (file extension) and cancel the event:
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
Then it would send the url to your background page which will tell your native app to start the download.
To make the decision whether to download or not more reliable you may perform a XMLHttpRequest with method: "HEAD" and analyze the response headers (you'll have to deal with CORS though) like Content-Disposition: attachment; filename=<file name.ext> and others.