将w3cplus网站中的文章页面提取并导出为pdf文档

　　最近在看一些关于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啦！

时间： 2024-10-13 07:49:51

将w3cplus网站中的文章页面提取并导出为pdf文档的相关文章

指向同一网站中其中的页面的链接

当连接指向同一网站中的其他页面时,就没必要在URL中指定域名这时我们可以采用简短的相对URL. <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> &

如何提取PDF文档的页面

在处理文档的时候有些页面内容是不需要的,那么如何来得到我们想要的文档页面?遇到这种情况有两种方法,一是对PDF文件进行编辑,将不需要的页面内容进行删除,还有就是将需要的页面单独提取出来.我们可以根据不同的情况来选择操作方式. 如果提取的页面数量占据整个PDF文档页面数量的一半以下,我们可以采用提取页面的方式,将这些页面单独分割出来形成新的文件.运用PDF在线分割软件就可以实现. 在主页面中选择对应的操作选项,跳转到pdf分割页面.点击选择文件,在本地选择需要操作的pdf文件添加到工具中. 在下方

根据网站所做的SEO优化整理的一份文档

今日给合作公司讲解本公司网站SEO优化整理的一份简单文档 架构 ########################################## 1.尽量避免Javascript和flash导航. 虽然JS和FLASH能把网站做的绚丽漂亮,但目前搜索引擎还是无法顺利的抓取其中的内容,所以我们要避免. 2.目录层次不能太深. 网站目录尽量保持在三层以内,尽可能接近根网址,比如“www.xxx.com/产品目录/产品名称”明显比“www.xxx.com/产品目录/年份/月份/产品名称”要好. 3

Python抓取单个网页中所有的PDF文档

Github博文地址,此处更新可能不是很及时. 1.背景 最近发现算法以及数据结构落下了不少(其实还是大学没怎么好好学,囧rz),考虑到最近的项目结构越来越复杂了,用它来练练思路,就打算复习下数据结构与算法.结合最近在学英语,然后干脆就用英文喽.然后选定一本参考书籍<Data Structures and Algorithms in Java>.刚开始看还是蛮吃力的,慢慢来.由于之前有翻录书籍附录的习惯,于是就去书籍附带的官网看了下,发现http://ww0.java4.datastructu

怎么分割PDF文档的页面

日常处理一些文档的时候经常需要将文档中有用的页面整理提取出来,比如提取其中的一页或者多页出来形成独立的文档.有时候是将一个整体的文档按要求拆分成单独的几个文档.对于office文档我们都不陌生,但是如今也常常遇到pdf这种格式文档.那么对应这种格式的文档又该怎样进行文档的分割呢. 首先针对于小文档,我们可以用PDF编辑器对pdf文件的页面进行复制,粘贴到新的PDF文件中即可. 用编辑工具打开pdf文档,并新建一个文档,然后在要拆分的pdf同调出页面缩略图窗口. 在页面通过页面缩略图,将需要分割的

C# 复制PDF页面到另一个PDF文档

C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易.写这篇文章主要是分享一个简单而且比较容易实现的方法 - 使用C#将一个PDF文档的页面,包括文字.图片和背景等复制到另一个PDF文档的指定位置. 下面是我准备的两个PDF文件: 目标:将左边的PDF文档的第一页复制到右边的PDF文档的第二页的位置. 代码实现: 步骤1:初始化一个PdfDocume

.NET中的XML注释（一） 创建帮助文档

一.摘要 在本系列的第一篇文章介绍了.NET中XML注释的用途, 本篇文章将讲解如何使用XML注释生成与MSDN一样的帮助文件.主要介绍NDoc的继承者:SandCastle. 二.背景 要生成帮助文件,很多人会想到NDoc.其实在VS2003中不使用NDoc也一样具有"生成Web文档"的功能.然而很不幸,在升级为VS2005和VS2008后, Visual Studio中的此功能已经取消. 更遗憾的是NDoc这个项目由于资金等问题,作者Kevin于2006年7月宣布不再投入NDoc开

自动把动态的jsp页面（或静态html）生成PDF文档，并且上传至服务器

置顶2017年11月06日 14:41:04 阅读数:2311 这几天,任务中有一个难点是把一个打印页面自动给生成PDF文档,并且上传至服务器,然而公司框架只有手动上传文档,打印时可以保存为PDF在本地吧,所以感到很头疼,刚开始没有方向,所以只有surf the Internet了,网上看了很多资料,渐渐的从一点方向也不懂,到慢慢开始了解怎么着手去做,废话就不说了, 我看网上大概介绍了三种方式:Jasper Report . iText . flying sauser jasper report

【使用Itext处理PDF文档（新建PDF文件、修改PDF文件、PDF中插入图片、将PDF文件转换为图片）】

iText简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文件转化为PDF文件. iText的安装非常方便,下载iText.jar文件后,只需要在系统的CLASSPATH中加入iText.jar的路径,在程序中就可以使用iText类库了. 1.包的引用 1 import java.io.FileNotFoundException; 2 import java.i