Easy Way: How to Print a Web Page in 2021

You may come across a situation where you need to print a web page (home page) while you are working.

When you ask the authorizer or your boss to see it, you may be asked to “want to see the test page on paper” or “want to write the corrections on paper”.

At that time, there are many cases such as “I want to print a web page what I see on the Web, but the layout is broken” and “I can’t print well”.

Here’s how to solve that problem.

Setting method for each browser

When you try to print a web page, you may find that “when you look at the print preview screen, it is different from the web screen you are actually looking at” or “the layout is broken”. 

The phenomenon may be resolved by changing the print settings. Introducing the print setting method for each browser to print while viewing the web page .

For Internet Explorer

Check the “Print background color and image” checkbox in the “Print”-> “Print preview”-> “Page setup” dialog and click the OK button.

Print a Web Page

For Google Chrome

Check the “Print (P) …”-> “Detailed Settings”-> “Background Graphic” check box and click the OK button.

Print a Web Page

For Fire fox

Check the “Print …”-> “Page Setup (U) …”-> “Print Background Color and Background Image (B)” check box and click the OK button.

Print a Web Page

★ Slightly convenient reverse order printing

When printing a web page, the number of prints may reach multiple pages. In such a case, by setting the order in which the prints are printed out in reverse, you can save the trouble of changing pages and improve work efficiency.

To reverse the print order, select “Reverse order print” or “Print from last page” in the print settings.
(For detailed setting method, please check each setting method of your printer.)

How to convert a web page to PDF

Use extensions

You can convert web pages to PDF by using the extension provided for each browser.

<Use Awesome Screenshot>

An extension of Google Chrome that allows you to create and edit screenshots.

You can save screenshots of the entire home page, not just the screen currently displayed on the screen. By using the palette on the edit screen, you can insert characters and figures and crop web pages.

Awesome Screenshot (https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en-US)

<Use full page screen captcha>

An extension of Google Chrome that can capture the entire web page.

It is also convenient when you want to capture a portrait page that requires scrolling because you can capture even the part that cannot be displayed on the browser.

full page screen captcha (https://chrome.google.com/webstore/category/extensions?hl=en-US)

<Use the extension function of Internet Explorer>

You can use it by enabling “Adobe Acrobat Create PDF Toolbar” if Acrobat is installed, or by selecting “Adobe PDF” if Acrobat Reader is installed.

Converting web pages to PDF, Adobe Acrobat

(https://helpx.adobe.com/in/acrobat/using/converting-web-pages-pdf.html)

<Enable Acrobat Create PDF extension on Google Chrome>

It is available by enabling the Acrobat Create PDF extension on Google Chrome.

Enable Create PDF extension on Google Chrome

(https://helpx.adobe.com/in/acrobat/using/enable-createpdf-extension-chrome.html)

<Enable Adobe Create PDF Extensions in Firefox>

It is available by enabling the Adobe Create PDF extension in Firefox (Fire Fox).

Enable Create PDF extension in Mozilla Firefox

(https://helpx.adobe.com/in/acrobat/using/enable-createpdf-extension-firefox.html)

Use PDF conversion tool

There is also a tool that can convert to a PDF file just by entering the URL of the page. This can be quick and easy, isn’t it?

In particular, people who are not good at IT tend to reject the message “I don’t know anymore!” Just by setting the browser or adding-ons. It’s easy and recommended for those who panic when they hear a word they don’t understand.

PDFmyURL (http://pdfmyurl.com/)

Use the Print a Web Page Function of the Browser

You can also convert web pages to PDF by using the print a Web Page function of Google Chrome and Internet Explorer.

Normally, when you select a printer to print, select “Save to PDF”. Set the file name and click “Save” to download the PDF file to your computer.

However, since the print screen is saved as a PDF as it is, the breaks between pages may be strange, so it is necessary to check on the preview screen.

Print a Web Page

Make CSS for Printing

If the content is intended for printing from the beginning, it is best to prepare a separate PDF for printing and have it downloaded. However, there are times when your boss asks you to print an updated web page on paper for confirmation.

By creating CSS that takes printing into consideration, you can print out with a layout suitable for printing, and you can save time and effort later.

Add “@media print” to the existing CSS.

Styles written after the description “@media print” are valid only when printing. With this method, no modification is required on the HTML side.

Description method
 / * Print preview * /
  @media print {
  / * Contents applied by print * /
  }

Create a dedicated CSS for printing

You can adjust the layout at the time of printing by preparing a css file for printing exclusively and reading it with link rel ~.

At that time, set the media type that can control CSS for each output device to “print”.
(Use media = ”all” or media = ”screen” for CSS for normal displays)

Description method
<link rel = "stylesheet" type = "text / css" media = "print" href = "print.css"> 

By description, you can specify the print state that you want to print (add header / footer, adjust size, page break, etc.).

<For example, when you want to break a page in a good place>

Describe properties such as page-break-before and page-break-after in the place where you want to break the page when you want to eliminate the breakage of the text or image across pages at strange places, or when you want to break the page in a good place. By doing so, it is possible to control the page break position during printing.

You can force a page break immediately before this element, or you can prohibit a page break at this position.

Description method
 h1 {
page-break-after: always; / * Make a page break immediately after * /
  }
Description method
 h2 {
page-break-before: always; / * Make a page break immediately before * /
  }

By creating a CSS that takes printing into consideration from the beginning, you can eliminate the stress of printing poorly and layout collapse.

In some cases, it may be ant to propose a method other than printing. !!

As an aside, there is also a convenient tool that allows you to attach notes to sites and images and share them as if you were using sticky notes.

You can easily capture a web page just by entering the URL on the site. You can also specify the range and crop, or write a memo on the image.

https://webtopdf.com/

Even if the author or boss asks you to print it to check the web page, you will have to print it and the written one will come back …

It will take extra effort. If possible, it might be an ant to suggest using a tool like the one above.

(However, there are many cases where it is not accepted. In that case, please try printing using the method introduced on this page.)

Summary

As I introduced this time, there are several ways to print a web page without breaking the layout of the web page.

In addition, those who create and update web pages can save time and effort later by using CSS that assumes printing at the production stage. Please try the methods that are easy to do, such as convenient tools and simple setting changes.

It’s Your Choice to Decide the Future

Depending on the work environment, it tends to happen unexpectedly that it takes extra time to support analog work that can be completed on the web or online, such as the web page printing work introduced this time.

Some people may think, “I can easily do it if I systematize it.” “I want to use this time for another business time in the future …”. In particular, if you have a boss who is not familiar with IT, you may spend a lot of time on elementary support work.

There is no doubt that the IT literacy of managers and those in higher positions will affect future management and company growth .

Of course, there is no need to do difficult programming or incorporate a system, but if you can not think about “how to understand what IT and the Web are and how to utilize them”, it is big in itself. It will be handicapped.

Is it okay to keep it as it is, or think about other options … It is also important to think slowly.

Whether you leave it as it is or change the environment, you are the one to choose.

Rather than keep complaining that “my boss is not familiar with IT, isn’t it?”, It is important to think about what you can do and take action. As soon as I propose to improve the efficiency of work in the company, I actually try it. If that doesn’t work, either give up and accept it, or go outside …
your own career and life. Let’s proceed positively.

Leave a Comment