Wayne Ye

Wayne Ye

Whatever is worth doing is worth doing well!

Print partial web content

Per project needs we need print part of a web page, which I have no idea when I saw this requirement, I googled and I read this post: http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm, it basically use document.write to write the content you want to print to a new window by window.open, it works, however I really don't like the opened window.

Occasionally I tried to find out whether CSS can achieve such function, seemed I was on the right way: CSS media types is to control different display settings on different "media", controled completely by your own. What a shame to myself! CSS media types definiton from W3C official page:

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

We can define print style by few ways:

  1. Make a seperate css file to define print style and link it by specifying media=print, <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  2. Insert a <style media="print"> snippet into the <head>.
  3. Define @media print rule inline with our CSS code: @media print {#text_print:display:visible;}.

I'd reccomended option 1 or 3 if the project is small.

In additional I occasionally found that the Web Development extetion for Chrome already support this, we don't have to waste many pieces of papersSmile.

Web Development Tool

See also:

Print Button

W3C School: CSS Media types

Tags:

Categories:

Updated:

Leave a comment

You may also enjoy

RIP Bram Moolenaar - Father of Vim

From the most recent MacVim release note: As some of you may have read, Bram Moolenaar, the creator and maintainer of Vim, has passed away recently. He has worked tirelessly on Vim for more than 30 years and this release is dedicated to him. If you would like, you could pay your respects at this discussion thread. The Vim project has transitioned to new maintainers, and MacVim will continue to be supported as long as Vim is around. I decided to use Vim as my all time text editor since 12 years ago, it completely changed my mind and my life, there were some times I felt like my typ...

BMW Convertible As My Beater Car

Life is too short to drive boring cars I bought a 2015 BMW X5 Dec last year, it has been half a year so far (with 2 months she stayed inside the garage for most of the time due to the pandemic), I am pretty satisfied with it, her condition is absolutely excellent, everything works, yes you see it correctly, after 5 years of its life, there was nothing broken, as BMW vehicle built in recent years, this is something not VERY easy. My plan is to keep it as long as possible before it turns into an endless money pit, and keeping her value as high as possible, one of the major reason I b...

SkyJump from Stratosphere Tower at Las Vegas - Smile all the way down

Instead of spending any cent in the money pit casinos, I’d chose to do something more meaningful and exciting :) SkyJump Las Vegas SkyJump Las Vegas holds the Guinness World Record for highest commercial decelerator descent with an official height of 829 ft (253 m) and is located at Stratosphere Las Vegas. As part of its grand opening event, Las Vegas Mayor Oscar Goodman presented a written proclamation deeming April 20, 2010 as SkyJump Day in Las Vegas. – Wikipedia (https://en.wikipedia.org/wiki/SkyJump_Las_Vegas)

AWS reinvent 2019 - Las Vegas

This is my second time attending AWS re-Invent, last time was year 2017, the purpose of this blog is to summarize what I’ve learned, impressed and entertained :smile: At reinvent logo Crazy crowd at midnight madness party Overall during my week staying my daily schedule was listening to sessions mixed with slack/emails during the daylight, and party/social in the evening time. All the keynotes/sessions have been uploaded here: https://reinvent.awsevents.com/learn/keynotes/ and all announcements were summarized at this page, my personal top 5 thrilled announcement...