I was working on a small feature when user click on a button, download a file directly but not open it in a new tab, the button looks like this:. This is straightforward, however if there is no anchor element on the page to include the download attribute, you might need to add a few lines of JavaScript to make it happen:.

However this download attribute only works for same origin URLs, what if this static file is saved somewhere else once deployed such as AWS s3 bucket? But an interesting thing I learned is that if the file is saved in S3 bucket, then you can change the property of file to download the file. In a regular HTTP response, the Content-Disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved locally.

Go to the S3 bucket, click on properties of the file, click on metadata, then add a new key-value pair with key Content-Disposition and value attachment. February 3, 4 minute read. December 1, 1 minute read. March 27, 5 minute read. March 26, 3 minute read.

Shuo Feng Software Engineer. You may also enjoy How to guarantee exactly once with Beam on Flink for side effects February 3, 4 minute read. Use git bisect to find first bad commit December 1, 1 minute read. Enter your search term

Download File Instead of Displaying in A New Window – Shuo Feng’s site

 
WebSetting the value of href navigates to the provided URL. If you want redirection, use replace.mee (). The difference from setting the href property value is that when . WebYou can use replace.me to get the url of the current page or you can simply use the complete web address. let url = replace.me; alert (url); . WebDefinition and Usage The replace.me property sets or returns the entire URL of the current page. Syntax Return the href property: replace.me Set the href property: .