网页内容另存为PDF

目的

覆盖原网站的浏览器打印CSS,仅保留文章内容,使打印输出的PDF更友好。

步骤

1. Chrome浏览器开启打印预览模式
2. 找到样式文件
3. 追加覆盖样式
4. 右键打印保存为PDF

注意:如果图片作为背景图,需要勾选Background graphics

联合早报

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
header, .bg-gray, .breadcrumb,
.d-lg-block *,
div.col-lg-4:nth-child(3),
#video-info,
.article-relative-word,
#outbrain-wrapper,
footer,
#back-top-bar *,
.pdb20 > div:nth-child(2),
.further-reading,
body > div.container > div:nth-child(1),
body > div.container > div:nth-child(2) > div.col-lg-7.col-12 > div:nth-child(2) > div div
{
display: none;
}

a {
text-decoration: none!important;
}
.col-lg-7 {
max-width: 100% !important;
flex: auto;
}
.carousel-item img{
width: 100% !important;
height: 100% !important;
}
.f14 {
font-size: 20px;
}
body {
padding-top: 30px;
padding-bottom: 10px;
}
article {
font-size: 22px !important;
}
.author-info {
font-size: 20px !important;
}
.article-title {
font-size: 36px !important;
}
@page{size:a4}

BBC

News

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#main-content>div:not(.ssrcss-1ocoo3l-Wrap),
.ssrcss-hhhbpo-ContainerWithSidebarWrapper>div:not(.ssrcss-rgov1k-MainColumn),
.ssrcss-rgov1k-MainColumn>div,
.ssrcss-2z3pjz-SectionWrapper,
footer,
.e1nh2i2l0,
.teads-inread,
#header-content {
display: none !important;
}

/* 使图片不被截断 */
.ssrcss-wpgbih-StyledFigure {
page-break-inside: avoid;
}

.ssrcss-uf6wea-RichTextComponentWrapper {
max-width: none;
}

Worklife, Future, Culture

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#orb-banner,
#ad-portal,
.StickyElement,
.article-share-tools,
.article__similar-articles,
.teads-inread,
.article-body-native-ad,
.around-the-bbc-swimlane,
.article-end__share-tools,
.orb-footer,
.article-body__image-text,
.hero-image,
.article-headline__collection
{
display: none !important
}

.article__body {
max-width: none !important
}
.article__intro {
font-size: 32px
}
.body-text-card {
font-size: 12px
}
.simple-p-tag--medium {
font-size: 14px
}
.article-body__pull-quote {
margin: 10px 0;
}

BBC News 中文

  • 图片默认会被截断
  • 文字会截断
  • 正文中的推荐链接没有唯一标识,需要逐个编辑删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.bbc-1fe3qkx, /* 导航菜单 */
.bbc-1dklj5e, /* 顶部广告 */
.bbc-18r23py, /* 简繁切换按钮 */
.bbc-fm4knk, /* 【右侧】推荐内容 */
.bbc-113e14a, /* 【正文】广告 */
.bbc-1km06py, /* 【底部】相关主体 */
.bbc-1u4iszl, /* 【底部】推荐内容 */
.bbc-1s1cxbv, /* 图片上的标识 */
footer {
display: none;
}

/* 使图片不被截断 */
.bbc-1qdcvv9 {
page-break-inside: avoid;
}

/* 可能的推荐链接 */
.e1gggypo0.bbc-oa9drk.e57qer20 {
display: none;
}

/* 字体 */
.bbc-mj7obe {
font-size: 12px;
padding-bottom: 8px;
line-height: 1.5;
}
.bbc-6w9yzd {
font-size: 20px;
padding: 8px 0;
}
.bbc-6yjyco {
font-size: 28px;
line-height: 1.5;
padding: 10px 0;
}
.bbc-q4ibpr {
padding-bottom: 0;
}

/* logo */
.bbc-fk60et {
background: white;
}
.bbc-fk60et svg {
color: black;
}

/* 【正文】视频、图片 */
.bbc-rl27ak, .bbc-189y18v, .bbc-1ka88fa, .bbc-1bh6w8m
{
display: none;
}

@page {
margin-bottom: 10;
}

CNN

1
2
3
4
5
6
7
8
9
10
#breaking-news-wrapper,
#nav,
#footer-wrap,
#story-bottom,
.ad,
.pg-rail,
.el__embedded
{
display: none;
}

The New York Times

  • 绝大多数内容需要订阅才能浏览,可在订阅窗口出现之前终止浏览器加载绕过此限制。
  • 浏览器打印输出的PDF格式友好,会自动去除广告和保持图片不会被分页截断。

https://nytimes.com/interactive/2017/06/09/movies/the-25-best-films-of-the-21st-century.html

Ctrl + Shift + P Disable JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html, body {
overflow: auto!important;
}
.nytd-author.clearfix,
.nytd-user-comments,
h5.nytd-pullquote,
.nytd-related-promo,
.g-ad-wrapper,
#page-footer,
#related-coverage,
#BottomAd,
#navigation,
#mobile-navigation,
#gatewayCreative
{display: none !important}

纽约时报中文网

广告块较多但命名统一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.setting-bar,
.big_ad,
.article-body-aside,
.article-footer,
.nav-footer,
.download,
.article-ribbon,
#tbl-taboola-reminder,
#topad,
.title-bar {
display: none !important;
}

.article-area .article-content .article-header {
border-top: none !important;
}

The Washington Post

绝大多数内容需要订阅才能浏览,可在页面加载完后删除<html>标签中的overflow: hidden;<body>标签中的overflow: hidden;position: fixed;绕过此限制。

路透中文网

路透中文网删除少量广告内容即可有良好的打印输出

1
2
3
4
5
6
7
8
9
10
11
div[class^="AdSlot"],
div[class^="TwoColumnsLayout-leaderboard"],
div[class^="TwoColumnsLayout-right-column"],
div[class^="RelatedArticles-container-gnopT"],
nav[class="RegularHeader__nav___30a05"],
div[class^="RegularHeader__tools"],
div[class^="SocialTools__container"],
.RecircRibbon-container-cExim,
div[class^="ArticlePage-dianomi"] {
display: none;
}

日经中文网

日经中文网有独立的打印页面,便于存档

中国政府网