Chrome downloading html files

How to save a Web Page in Chrome

We show you how to download a webpage in Chrome as a HTML file, as well as how to save a link as a desktop shortcut.

If you’re looking to do some offline viewing, you can save a web page in Chrome as a HTML file. When you save from Chrome using this method, you can choose to keep just the basic text to keep the file size low or download additional assets like pictures.

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.

Due to these benefits, today we’ll focus on how to download a webpage as an HTML file. Those who do want to save a webpage as a PDF can check our dedicated tutorial instead. Let’s get started:

How to Download a Webpage in Google Chrome

The process to save a webpage in Chrome is very simple, but it is hidden behind some sub-menus. Once you’ve opened your browser to the website you want to save, follow the steps below:

1. Press the ‘Save page as…’ button
   
   With your page open, press the three dots in the upper-right corner of your Chrome window, next to the search bar. Then, hover over “More tools” and click “Save page as…”. Alternatively, press the Chrome ‘Save as’ shortcut, “Ctrl + S”.
   
2. Save the HTML file as a complete page, single file, or HTML only
   
   A Windows Explorer dialog will surface with the name automatically populated. Pay attention to the “Save as type” dropdown, where you have three options:

– Webpage HTML Only: Saves only the HTML code of the website. Images, advanced webpage theming, and animations will not be preserved.
– Webpage, Single File: Save a page in Chrome as a single mhtml file rather than a folder. This reduces clutter but may not have quite as good results for some web pages.
– Webpage, Complete: Saves a HTML file as well as a separate folder that requires all of the files the website needs to function. Typically has the closest results to the original page.

When you’ve decided which is right for you, click it and then press the “Save” button.

How to Create a Shortcut to a Web Page or Website

The above is great if you want to view an article offline, but what if you just want an easy way to access your favorite page or site?

For this, we can save the link as a shortcut. Creating a shortcut for a website won’t save the website for offline viewing, but it will make it much faster to get to from your desktop when you do have a connection.

Press the ‘Create shortcut…’ button in Chrome

In your Google Chrome window, press the three dots in the top-right corner. Then, hover over “More tools” and click “Create shortcut…”.

That’s all we have for you in this guide. However, while you’re here you may want to brush up on some other Chrome tricks. Did you know you can save all of your open tabs to read later or export your bookmarks locally? Consider giving a try and let us know if you run into any issues.

• Tags
• Download a webpage Chrome
• Google
• Google Chrome
• How to download a webpage
• how to save a webpage as a pdf
• how to save web page in chrome
• Software
• Tutorials
• Web Browsers

Источник

Creating / downloading a .html file with a chrome extension

Solution 1: The file needs to be available on the webserver and if it’s a public file this file needs to have Read rights set to Public. So now my question is how can I upload the file to the webserver in react, so when the user goes to that url they can have a file available for download.

Creating / downloading a .html file with a chrome extension

I’m building my first Chrome extension. So far my code takes elements of a webpage and creates HTML markup (loaded in a string in Javascript).

My extension leads in a button

$(".column1").prepend('
') $('#edmMaker').click(function()< var html = "
Here is some HTML text
Here's some more
" // create a .html file and download it to the user's desktop >); 

In Node.JS I would just write a .html file to the local disk, but I can’t quite figure out how this works in Chrome Extension world.

Sub-question: Is there any way to tabify the HTML that is being output? The actual code I’m outputting is an HTML email template, and Javascript will only let me load in a string without line breaks and tabs.

Here’s a method I wrote that leverages HTML5’s download attribute to download a file:

var saveHTML = function(fileName, html) < // Escape HTML var el = document.createElement("dummy"); el.innerText = html; var escapedHTML = el.innerHTML; // Use dummy tag to save var link = document.createElement("a"); link.download = fileName; link.href = "data:text/plain,"+escapedHTML; link.click(); // trigger click/download >; saveHTML("myHTML.html", " "); 

Check it out in action here.

If you’re not looking to save the file, you can just use storage.

As @Xan pointed out below, the chrome.downloads API exists as well which may be of some use, specifically chrome.downloads.download() method.

As for multiline strings with tabs/spaces/newlines, there’s 3 ways:

1.) Manually, using newlines ( \n ) and tabs ( \t )

"\n\t
\n\t\t
Here is some HTML text
\n\t
\n\t
\n\t\t
Here's some more
\n\t
\n" 

  
Here is some HTML text
 
 
Here's some more
 
  

2.) Using JavaScript’s multi-line string support, which requires that you insert a backslash at the end of a line:

var html = "\ 
\ 
Here is some HTML text
\
 \ 
\ 
Here's some more
\
 \ "; 

3.) Array.join :

var html = [ "", " 
", " 
Here is some HTML text
", "
 ", " 
", " 
Here's some more
", "
 ", "" ].join("\n"); 

HTML download Attribute, The value of the download attribute will be the new name of the downloaded file. There are no restrictions on allowed values, and the browser will

How to Use the ‘download’ Attribute For Your Websites

In this video I’ll be showing you how to create «download» links for use on your websites or Duration: 4:26

Create a Website to Upload and Download any files in HTML & CSS

How to Create Download Link in HTML5

Create Download Link in HTML https://youtu.be/7c4cNgD5KNAHi, Today we’ll learn to
Duration: 7:58

How to make a button using html that will cause a zip file to be downloaded

On my website I have a downloads page and I want to know how to make a button that will cause the user to download a zip file.

If you really want to have button instead of link, you can it like this:

If you consider using link, you can do it much easier:

How To Create a Download Link, Learn how to create a download link with HTML. Download Link. You can use the HTML download attribute to specify that the target will be downloaded when a user

How to put a file in my website server available for download

I’m trying to implement a click and download functionality in react. I tried using

but when the user clicks on it the download would display «Failed — No file». I searched many articles and the answer I found is

So now my question is how can I upload the file to the webserver in react, so when the user goes to that url they can have a file available for download.

The file needs to be available on the webserver and if it’s a public file this file needs to have Read rights set to Public. Be careful with this and not set write rights to public. How you get your file there is very dependant on your hosting provider.

I found the answer from this post: ReactJS- downloading a pdf file «Failed — no file»

I just need to put the files to download in the public folder

You can use below template which can generate link of file which can be downloadable.

You have to put the pdf file in a folder. lets assume the folder is in the main directory and the folder name is pdf-folder and the pdf filename is my-pdf.pdf,

And if this doesn’t work you should try implementing javascript and then use createObjectUrl.

Using HTML5/JavaScript to generate and save a file, Another option to save client-side generated files, is to put their contents in a Blob (or File) object and create a download link using URL.createObjectURL(

Источник