最近在看一些關於CSS3方面的知識，主要是平時看到網頁中有很多用CSS3實現的很炫的效果，所以就打算系統的學習一下。在網上找到很多的文章，但都沒有一個好的整理性，比較凌亂。昨天看到w3cplus網站中關於CSS3的一些文章，覺得講解的比較細，所以就決定以此作為學習的模板，一步步開始。
平時上下班在地鐵上經常是拿着手機看小說新聞之類的，考慮到在手機端直接訪問這些網頁肯定會耗費很大的流量，所以最好是將這些文章下載下來放在手機里看，比如保存成圖片或pdf當然是最好的選擇。
之前曾在園子里看到某前端高手通過js將博客園中的文章提取並利用chrome的打印功能，將網頁直接保存成pdf文檔，以此為靈感，就自己也來實現一下這個功能。
先給出一下找到的這段js代碼：
javascript:var el = $('.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 });
因為本人對前端不是很熟悉，所以也是一點點的嘗試着來實現，下面給出實現的過程，也是為了在此做一個簡單的記錄：
<script>
//模板 用於獲取博客園文章主要內容並打印成pdf的js提取代碼
javascript:var el = $('.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插件的話，需要將代碼寫到(function($){//js code })(jQuery); 中。
javascript:(function ($) { var el = $('.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); //報錯
javascript: (function ($) { var el = $('#page>.container'); $('body *').not(el.find('*')).hide(); el.find('#sidebar-second').remove(); })(jQuery); //可行 刪除右側邊欄並設置左側內容margin:0
javascript: (function ($) { var el = $('#page>.container'); el.find('#sidebar-second').remove(); el.find('.main-wrap').css({ margin: 0 }); })(jQuery); //測試
javascript: (function ($) { var el = $('#page>.container'); el.find('#sidebar-second').remove(); el.find('.main-wrap').css({ margin: 5 }); $('body *').not(el.parent().andSelf().find('*')).hide(); })(jQuery); //可行 想通過el.parent('#page').andSelf()的方式使div#page 顯示，但無法精確定位到該div元素，所以采用先將整體hide,在將div#page顯示的方法
javascript: (function ($) { var el = $('#page>.container'); $('body *').not(el.parent().andSelf().find('*')).hide(); $('#page').show(); })(jQuery); //對上面一行的精簡
javascript: (function ($) { var el = $('#page>.container'); $('body *').not($('#page').find('*')).hide(); $('#page').show(); })(jQuery); //去除頁面中所有的廣告 el.find('[class="block block-block"]').remove(); 所有的廣告的class都是block block-block
javascript: (function ($) { var el = $('#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); //第一版可用代碼
javascript: (function ($) { var el = $('#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); //在頭部加上當前頁面的標題和url鏈接地址
javascript: (function ($) { var el = $('#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); //設置所有code代碼區的邊框1px 打印時去掉背景，添加邊框
javascript: (function ($) { var el = $('#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); //對第一版中各部分代碼的功能分析
javascript: (function ($) { var el = $('#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' });//設置內容格式 放大1.3倍
$('#breadcrumb').prepend(document.title + '<br\>' + window.location.href);//在頁面頭部添加當前的標題和url鏈接
})(jQuery); //第二版 第一版打印出來的一個頁面大小約1M多，需進行優化
//remove()掉頂部和底部的其他div 而不是hide()
javascript: (function ($) { var el = $('#page>.container'); var bd = $('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); //第二版測試版 經測試，remove()和hide()不會有太大體積上的差別
javascript: (function ($) { var el = $('#page>.container'); var bd = $('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); //移除所有head部分的script標簽
javascript: (function ($) { var el = $('#page>.container'); var bd = $('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); //第二版發布版 移除html下的所有script標簽
javascript: (function ($) { var el = $('#page>.container'); var bd = $('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); //第二版功能分析
javascript: (function ($) { var el = $('#page>.container'); var bd = $('body');//找到body元素
bd.find('#header').remove();//移除body中的#header
bd.find('#branding').remove(); bd.find('#footer-col').remove(); bd.find('#footer').remove(); $('html').find('script').remove();//移除html內的所有script標簽
$('body *').not($('#page').find('*')).hide();//將非內容區域均隱藏
$('#page').show();//顯示page標簽部分
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); //第三版 針對於某些代碼段太寬而覆蓋的問題進行修改
//chrome Ctrl+P 打印時默認選擇A4紙格式打印，A4的默認像素是 分辨率96像素/英寸下，794*1123 詳細參考：
//打印常識：A4紙張在顯示器上應該要多少像素? - 菩提樹下的楊過 - 博客園
//http://www.cnblogs.com/yjmyzz/archive/2012/01/09/2316892.html
//.page-inner 的padding 上下10px 左右0px
javascript: (function ($) { var el = $('#page>.container'); var bd = $('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); //第三版 發布版
javascript: (function ($) { var el = $('#page>.container'); var bd = $('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>
那要怎樣來使用這段代碼呢？
只要我們將上面的js代碼段（目前是 第三版發布版），保存成chrome瀏覽器的書簽，在w3cplus網站的文章頁面中點擊一下，就能提取出文章中主要的內容部分。然后通過快捷鍵Ctrl+P 調出打印窗口，推薦邊框選項設置為“無”，取消勾選“背景圖形”，然后點擊“保存” 即可（也可根據個人喜好自定）。
現在，將導出的pdf文檔傳到手機里，就ok啦！
2015-2-13更新：
今天對上面的那段代碼又進行了一下修改，增加了一些內容：完整代碼如下：
javascript: (function($) { var el = $('#page>.container'); var bd = $('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('[id="BAIDU_DUP_wrapper_u1490106_0"]').remove();//去除百度聯盟廣告 el.find('[id="node_footer"]').remove();//去除底部的上一篇、下一篇提示及分享的圖標 el.find('#sidebar-second').remove(); el.find('.main-wrap').css({ margin: 0 }); el.find('.page-inner').css({ padding: '10px 0' }); el.find('pre').css({ 'word-wrap': 'break-word', 'overflow': 'hidden' });//頁面中如果有較長的代碼會被遮蓋，這里使其自動折行；雖然這樣處理后看上去不是很美觀，但至少保證完整性 el.find('pre, pre code').css({ border: '1px solid #F5062B' }); $('body').css({ padding: 0, zoom: 1.2, background: '#fff' }); $('#breadcrumb').prepend(document.title + '<br\>' + window.location.href); })(jQuery);
主要的修改內容如上面代碼中的注釋：
- 有些頁面中會有百度聯盟的推廣廣告，看上去非常反感，直接去掉；
- 去除了頁面底部的上一篇、下一篇提示及分享到的圖標；
- 頁面中較長的代碼段會超出頁面而被遮蓋，這里通過css來使其自動折行；
如果還有其他修改的可以自行增加，這段代碼也很簡單，很容易理解。
附上用Chrome打印時的配置： 這里我選擇的是A3紙張大小 分辨率72下，對應像素為：1191*842px 瀏覽器寬度1100px .
