LUPA开源社区 › 首页 ›业界资讯› 技术文摘 › 查看内容

WordPress文章保存为PDF的最佳方式

2015-4-10 22:41| 发布者: joejoe0332| 查看: 3262| 评论: 0|原作者: tinylab.org|来自: tinylab.org

摘要: 如果碰到好文章，通常希望下载并收藏起来，甚至直接打印成纸质版。由于 Web 页面不便于直接保存，所以，一个 WordPress 站点提供导出 PDF 的功能变得非常迫切。尝试了诸多办法，都或多或少有一些缺点，不过最后找到 ...

目录 [隐藏]

由来

如果碰到好文章，通常希望下载并收藏起来，甚至直接打印成纸质版。由于 Web 页面不便于直接保存，所以，一个 WordPress 站点提供导出 PDF 的功能变得非常迫切。

尝试了诸多办法，都或多或少有一些缺点，不过最后找到了两个比较不错的方式，下面来逐个比较与分析下。

PDF 插件一览

一旦有新的需求，通常想到的是看看有没有合适的插件，搜罗了一遍网路和 WordPress 插件中心，发现这几个是比较推荐的：

CleanPrint / CleanSave
非常美观，可惜有两个缺点：
- 部分选项的中文支持不好
- 在加载页面时会访问 CleanPrint / CleanSave 的网站，会拖慢整个系统
Print Friendly and PDF Button
中文支持得不错，也比较美观，比较可惜的是：
- 同样会在加载页面时访问外部网站，会拖慢整个页面加载，甚至好像会被 GFW 屏蔽，导致整个网站都无法加载
- 生成的目录无法正常链接到文档内部，而是会链接到网站的原有链接
Hacklog Down As PDF
中文支持得非常好，只是太丑陋了。

最佳插件：WP Print Friendly

经过大量的尝试，发现了一个非常简单的插件：WP Print Friendly

这个插件的思路很简单，

不用额外的库
不需要访问外部网站
直接生成另外一个更简洁适合打印的页面
最后让用户自己使用浏览器的打印支持 Print to PDF

在测试过 3 个主流浏览器：Chromium-browser, Firefox 以及 Safari 后，

完美支持中文
生成 PDF 后，目录链接轻松跳转到文档内部（注：Safari 似乎有些问题）
高效快捷
- 无须在服务器端生成 PDF，减轻服务器压力
- 无须访问第三方网站，也不用担心 GFW

不过需要注意的是，该插件不能很好支持源代码格式化插件：Crayon，需要稍微改一下插件，把输出页面的textarea 框干掉，否则同一份代码会重复输出两次。

改动大体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ diff -Nubr a/wp-content/plugins/wp-print-friendly/default-template.php b/wp-content/plugins/wp-print-friendly/default-template.phpp 
--- a/wp-content/plugins/wp-print-friendly/default-template.php 2015-04-09 02:14:09.361139007 +0800
+++ b/wp-content/plugins/wp-print-friendly/default-template.php 2015-04-09 02:14:10.117158690 +0800
@@ -20,7 +20,9 @@
                        if( is_attachment() && wp_attachment_is_image() )
                            echo '<p>' . wp_get_attachment_image( $post->ID, 'large' ) . '</p>';
 
-                       the_content();
+                       $content = apply_filters('the_content', $content);
+                       $content = preg_replace('#<textarea[^>]*>(.*?)</textarea>#is', '', $content);
+                       echo $content;
                    ?>
 
                    <?php

另外，为了让打印按钮（实际是生成另外一个适合打印页面的按钮）悬浮在文章正文的右侧，我们在 WordPress 的主题下的 style.css 中加了如下三行：

1
2
3
4
/* For WP Print Friendly */
.print_link{text-align:right;}
.wpf_wrapper{text-align:right;}
.wpf_div{text-align:right;position:absolute;right:5%;}

更简办法：CSS Print Style

其实还有一个根本不需要任何插件的方式，那就是直接利用 CSS 的特性。

浏览器为了支持两种完全不同类型的设备：显示器和打印机，提供了 @media print 和 @media screen 两种不同的控制方式。当然，也可以对应地用 <link rel="stylesheet" href="print.css" media="print" /> 和<link rel="stylesheet" href="screen.css" media="screen" /> 这种方式。

为什么需要两种类型呢？原因很简单，因为显示器使用的是 px 单位，而打印机用的是物理尺寸，所以，如果直接输出到打印机，那打印出来的效果可能会跟显示的效果有差异。CSS print 样式一文有较详细的解释。

打印到 PDF 也同样可以利用 @media print 这一特性。所以，可以直接通过 @media print 控制哪些内容最终要打印出来，或者打印成什么样。

只需要做如下修改，就可以达到非常好的效果：

1
2
3
@media print {
    #nav, #sidebar-border, .addcomment, .gotocomments, #nav-below, .post-info-bottom, #comments-div, .commentlist, #respond, .thumbs-rating-up, .thumbs-rating-down, #thumbs-rating-container, #footer, .wpf_div, .toc_toggle{display: none;}
}