Download files pointing to html page

The advantage of this method over saving a webpage as a pdf is the underlying code. When you convert a web page to pdf, it takes an image and places it in a document. This is great for printing but means that the website is no longer interactable. When you save an HTML file you can still copy text, modify the code, click on links, and view animations.

Those who do want to save a webpage as a PDF can check our dedicated tutorial instead. The process to save a webpage in Chrome is very simple, but it is hidden behind some sub-menus. With your page open, press the three dots in the upper-right corner of your Chrome window, next to the search bar.

I can't imagine a scenario where the first two would be fine but the anchor as a button would be problematic. Add a comment. Active Oldest Votes. You can trigger a download with the HTML5 download attribute.

That means the page and the file must share the same domain, subdomain, protocol HTTP vs. HTTPS , and port if specified. Exceptions are blob: and data: which always work , and file: which never works. If it is blank, the browser defaults to the file's name. Improve this answer. MultiplyByZer0 4, 3 3 gold badges 28 28 silver badges 46 46 bronze badges. Joe Pigott Joe Pigott 7, 5 5 gold badges 29 29 silver badges 42 42 bronze badges.

Browsers that understand download treat it as a download, otherwise it's opened in a new tab. How can this be applied to a button object instead of just an a tag? Actually this only works for urls of the same origin as mentioned in the MDN docs.

This is a huge limitation if we are looking to develop a generic solution — Akshat Gupta. The question is explicitly asking to use a button instead of a link — Quentin. Show 9 more comments. Gray k 22 22 gold badges silver badges bronze badges.

Cfreak Cfreak In when the answer was originally posted it wasn't supported in any major browser. This doesn't necessarily trigger a download. It simply causes the browser to navigate to file. Whether that results in file. Show 3 more comments. Ani Menon What if i wanna download a xml file? Thanks for your code. I have tested, it can working in IE, Chrome, Firefox.

If you have a file acceptable by the browser like a PDF it will open in new tab instead to show download dialog. You could use window. Show 1 more comment. Stefanos Chrs Stefanos Chrs 1, 2 2 gold badges 14 14 silver badges 44 44 bronze badges. NicholasKyriakides Kind of reminds me of this gem: image.

BryanLarsen You are right, Firefox doesn't allow this without adding the element to body first. Thank you, updating the answer — Stefanos Chrs. Is there a way that javascript function be triggered once the download finishes?

Just trying to show a message once downloads start and remove the message once download completes. Once you're satisfied with your code, save the changes to your HTML file and reupload it if necessary. You'll be able to see your new download button live on your website. Method 2. Open your site in the WordPress site editor. If you use WordPress to manage and publish your website, you can use the built-in tools to add a download link to any of your pages.

Log into your WordPress dashboard using the admin account. Place your cursor where you want the link to appear. You can put the link in the middle of an existing paragraph or create a new line for it. Click the "Add Media" button. You'll find this above the posting tools at the top of the page. Click the "Upload Files" tab and then drag the file into the window. You can upload a variety of different files, but WordPress may limit the size based on your account type.

It may take a little while to upload files, as most connections are slower uploading than downloading. Add a description for the file. You can enter a description underneath the file in the Add Media window. This will be the text that displays as the download link. This will insert the download link at the location of your cursor.

Note that this will link to an attachment page and not the actual file. This is a limitation of the WordPress software. Method 3. Open your website in the Weebly editor. Log into the Weebly site and open your web page in the Weebly editor. Select the text or object that you want to turn into a link. You can highlight text in a text field or select an image on your page that you want to turn into the download link for your file.

Click the "Link" button. When you have text selected, this looks like a chainlink, and can be found at the top of the text editor. When you have an image selected, click "Link" in the image control panel. Select "File" and then click "upload a file. Select the file you want to make available for download. Once you select the file, it will begin uploading. Basic users are limited to files 5 MB and smaller.

Premium users have a MB file size limit. Publish your site to see the new link. After uploading the file, the link will be ready to use. Click the Publish button to push your changes to the live site. Your visitors will now be able to click the link and download the file.

Method 4. Open your website in the Wix editor. If you use Wix to create and manage your site, log into the Wix website and load your webpage in the site editor. Select the text or image that you want to turn into a link.

You can create links from text on your page or from images. First, you pick the root folder you would like to start the directory listing with. There are two options to include hidden or system files if you like. You can change the title of the HTML page and you can check Enable under Link files if you want every file to be a clickable link. So there you have two programs that get the job done. If you have any questions, post a comment. Founder of Online Tech Tips and managing editor.

He began blogging in and quit his job in to blog full-time. He has over 15 years of industry experience in IT and holds several technical certifications.

Read Aseem's Full Bio.