將w3cplus網站中的文章頁面提取並導出爲pdf文檔

時間 2019-11-06

標籤 w3cplus cplus 網站文章頁面提取導出 pdf 文檔欄目網站開發简体版

原文原文鏈接

　　最近在看一些關於CSS3方面的知識，主要是平時看到網頁中有不少用CSS3實現的很炫的效果，因此就打算系統的學習一下。在網上找到不少的文章，但都沒有一個好的整理性，比較凌亂。昨天看到w3cplus網站中關於CSS3的一些文章，以爲講解的比較細，因此就決定以此做爲學習的模板，一步步開始。javascript

　　平時上下班在地鐵上常常是拿着手機看小說新聞之類的，考慮到在手機端直接訪問這些網頁確定會耗費很大的流量，因此最好是將這些文章下載下來放在手機裏看，好比保存成圖片或pdf固然是最好的選擇。css

　　以前曾在園子裏看到某前端高手經過js將博客園中的文章提取並利用chrome的打印功能，將網頁直接保存成pdf文檔，以此爲靈感，就本身也來實現一下這個功能。html

　　先給出一下找到的這段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 });

　　由於本人對前端不是很熟悉，因此也是一點點的嘗試着來實現，下面給出實現的過程，也是爲了在此作一個簡單的記錄：java

<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>

那要怎樣來使用這段代碼呢？node

　　只要咱們將上面的js代碼段（目前是第三版發佈版），保存成chrome瀏覽器的書籤，在w3cplus網站的文章頁面中點擊一下，就能提取出文章中主要的內容部分。而後經過快捷鍵Ctrl+P 調出打印窗口，推薦邊框選項設置爲「無」，取消勾選「背景圖形」，而後點擊「保存」便可（也可根據我的喜愛自定）。jquery

如今，將導出的pdf文檔傳到手機裏，就ok啦！chrome

2015-2-13更新：瀏覽器

今天對上面的那段代碼又進行了一下修改，增長了一些內容：完整代碼以下：app

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);