Extract and export the article pages from the W3cplus Web site as PDF documents

Recently in some of the knowledge about CSS3, mainly to see a lot of Web pages with CSS3 implementation of the very dazzling effect, so it is intended to study the system. Find a lot of articles on the Internet, but not a good collation, more messy. Yesterday saw W3cplus website about CSS3 Some articles, feel the explanation is relatively thin, so decided to use this as a learning template, step by step start.

Usually commuting on the subway is often held on the phone to read fiction news and so on, considering the direct access to these pages on the mobile phone will certainly cost a lot of traffic, so it is best to download these articles on the mobile phone to see, such as saving into a picture or PDF is of course the best choice.

Before in the garden to see a front-end master through JS to the blog park in the article extraction and use of Chrome's printing function, the Web page directly saved as a PDF document, as inspiration, I also realize this function.

Let's give you a look at the JS code you found:

javascript:var el = $ ('. container ');        $ ("*"). Not (El.find (' * ')). Hide ();         float: ' None ', Position: ' Static '}). Show (). FIND (' img '). CSS ({maxwidth:470, Height: ' Auto ' });        $ (' body '). CSS ({background: ' #fff ', zoom:1.1});

Because I am not very familiar with the front end, so is a little bit of trying to achieve, the following gives the implementation of the process, but also to do a simple record:

<script>//template used to get the main content of Blog Park article and print the JS extraction Code of PDFJavascript:varEl = $ ('. Container ')); $("*"). Not (El.find (' * ')) . Hide (); El.parents (). Andself (). css ({width:476, padding:0, margin:0, border: ' None ',float: ' None ', Position: ' Static '}). Show (). FIND (' img '). CSS ({maxwidth:470, Height: ' auto ') }); $(' body '). CSS ({background: ' #fff ', zoom:1.1 }); //The test found that if a jquery plugin was not explicitly introduced in the page, the code would need to be written to (function ($) {//JS code}) (jquery); javascript: (function ($) {            varEl = $ ('. container '); $ ("*"). Not (El.find (' * ')). Hide (); el.parents (). Andself (). css ({width:476, padding:0, margin:0, border: ' None ',float: ' None ', Position: ' Static '}). Show (). FIND (' img '). CSS ({maxwidth:470,height: ' auto '}), $ (' body '). CSS ({background: ' # FFF ', zoom:1.1 });        }) (JQuery); //Errorjavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not (El.find (' * ')). Hide (); El.find (' #sidebar-second '). Remove ();        }) (JQuery); //It is possible to delete the right sidebar and set the left content margin:0javascript: (function($) {varEl = $ (' #page >.container '); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). CSS ({margin:0 });        }) (JQuery); //Testjavascript: (function($) {varEl = $ (' #page >.container '); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:5}); $ (' body * '). Not (El.parent (). Andself (). Find (' * ') . Hide ();        }) (JQuery); //It is possible to make the Div#page display by el.parent (' #page '). Andself (), but it is not possible to pinpoint the DIV element, so it takes the whole hide first, the method that will be displayed div#pagejavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not (El.parent (). Andself (). Find (' * ')). Hide (); $ (' #page '). Show ();        }) (JQuery); //The streamlining of the above linejavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show ();        }) (JQuery); //Remove all ad el.find (' [class= '] block Block-block ') from the page. Remove (); All of the ads are class block Block-blockjavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:3}); $ (' body '). CSS ({padding:3, zoom:1.3, background: ' #fff ') });        }) (JQuery); //The first version of the available codejavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:3}); $ (' body '). CSS ({padding:3, zoom:1.3, background: ' #fff ') });        }) (JQuery); //add title and URL link address of the current page to the headerjavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);})        (JQuery); //set the border of all code areas 1px print with the background removed and the border addedjavascript: (function($) {varEl = $ (' #page >.container '); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);        }) (JQuery); //functional analysis of the parts of the code in the first editionjavascript: (function ($) {            varEl = $ (' #page >.container ');//Get body Content node$ (' body * '). Not ($ (' #page '). Find (' * ')). Hide ();//Hide content other than the body$ (' #page '). Show ();//The previous paragraph hides the parent node of the current body, which is displayedEl.find (' [class= ' block Block-block '] '). Remove ();//Remove all ads in the bodyEl.find (' #sidebar-second '). Remove ();//Remove the right sidebar from the bodyEl.find ('. Main-wrap '). css ({margin:0});//set left body full screenEl.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '});//set the code snippet border in a page$ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '});//set content format to zoom in 1.3 times times$ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' + window.location.href);//Add the current title and URL link to the head of the page}) (JQuery); //The first edition of the second edition prints a page size of about 1M, need to be optimized        //Remove () drop the top and bottom of the other div instead of hide ()javascript: (function($) {varEl = $ (' #page >.container ');varBD = $ (' body '); Bd.find (' #header '). Remove (); Bd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). CSS ({margin:0 });        }) (JQuery); //The second version of the beta test, remove () and hide () will not have too large a difference in volumejavascript: (function($) {varEl = $ (' #page >.container ');varBD = $ (' body '); Bd.find (' #header '). Remove (); Bd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);        }) (JQuery); //Remove all script tags from the head sectionjavascript: (function($) {varEl = $ (' #page >.container ');varBD = $ (' body '); Bd.find (' #header '). Remove (); Bd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); $ (' Html>head '). Find (' script '). Remove (); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);        }) (JQuery); //the second version of the release removes all script tags under HTMLjavascript: (function($) {varEl = $ (' #page >.container ');varBD = $ (' body '); Bd.find (' #header '). Remove (); Bd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); $ (' HTML '). Find (' script '). Remove (); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);        }) (JQuery); //Second Edition functional Analysisjavascript: (function ($) {            varEl = $ (' #page >.container '); varBD = $ (' body ');//Find BODY ElementBd.find (' #header '). Remove ();//removing the #header in the bodyBd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); $(' HTML '). Find (' script '). Remove ();//Remove all script tags within the HTML$ (' body * '). Not ($ (' #page '). Find (' * ')). Hide ();//Hide non-content areas$ (' #page '). Show ();//Show page tab SectionEl.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). CSS ({margin:0 }); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B ' }); $(' body '). CSS ({padding:0, zoom:1.3, background: ' #fff ') }); $(' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);        }) (JQuery); //The third edition modifies issues that are covered by some code snippets that are too wide        //Chrome ctrl+p printing By default, A4 paper format printing, A4 default pixel is the resolution of 96 pixels per inch, 794*1123 detailed reference:        //Printing Common sense: A4 How many pixels should the paper be on the display?----Blog Park        //http://www.cnblogs.com/yjmyzz/archive/2012/01/09/2316892.html        //. Page-inner padding up or down 10px 0pxjavascript: (function($) {varEl = $ (' #page >.container ');varBD = $ (' body '); Bd.find (' #header '). Remove (); Bd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); $ (' HTML '). Find (' script '). Remove (); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); El.find ('. Page-inner '). css ({padding: ' 10px 0 '}); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);        }) (JQuery); //Third release versionjavascript: (function($) {varEl = $ (' #page >.container ');varBD = $ (' body '); Bd.find (' #header '). Remove (); Bd.find (' #branding '). Remove (); Bd.find (' #footer-col '). Remove (); Bd.find (' #footer '). Remove (); $ (' HTML '). Find (' script '). Remove (); $ (' body * '). Not ($ (' #page '). Find (' * ')). Hide (); $ (' #page '). Show (); El.find (' [class= ' block Block-block '] '). Remove (); El.find (' #sidebar-second '). Remove (); El.find ('. Main-wrap '). css ({margin:0}); El.find ('. Page-inner '). css ({padding: ' 10px 0 '}); El.find (' Pre, Pre code '). CSS ({border: ' 1px solid #F5062B '}); $ (' body '). CSS ({padding:0, zoom:1.3, background: ' #fff '}); $ (' #breadcrumb '). Prepend (Document.title + ' <br\> ' +window.location.href);    }) (JQuery); </script>

So how do you use this code?

As long as we have the above JS code snippet (currently the third version of the release), save the bookmark to Chrome browser, in the article page of the W3cplus website Click, can extract the main content part of the article. Then through the shortcut key ctrl+p to bring up the print window, the recommended border option is set to "none", uncheck "background graphics", and then click "Save" (also can be customized according to personal preferences).

Now, upload the exported PDF document to your phone, OK!

Extract and export the article pages from the W3cplus Web site as PDF documents