本站首页 返回顶部 关于博主

怎样把WordPress的文章生成PDF

PDF版

多年以前给自己的博客增加了“文章生成PDF”这个功能,那时考虑比较多。随着时间的推移,CSS的越来越复杂,生成的PDF文件布局往往与源文件有很大的差异,甚至偶尔还出现乱码。

是时候升级一下“生成PDF”功能了。

搜寻Wordpress的PDF插件

不想重复造轮子,如果Wordpress的插件已经支持得很好,那就直接拿来用吧。

在wordpress的插件中心找到了一些生成pdf的插件,逐个尝试。

尝试 WP Advanced PDF,安装完之后发现与我的wordpress版本不兼容,于是升级wordpress,经过测试发现中文又会出现乱码;尝试 PDF24,也是对中文支持不好,经常出现乱码;尝试其他的插件,发现大多存在中文乱码或文档格式改变的情况。

看来,只能放弃现有的wordpress插件了。

基于现成工具改造

既然现有的wordpress插件不理想,下一步看看是否能基于其他的工具来实现。
优先考虑哪种方案呢?基于服务端API的转换工具比较重载,为了自己的博客文章另存为PDF这个小功能去搭建一台服务器,成本太高,暂且把它当做最后的选择。如果有JavaScript生成PDF的库,那就再好不过了。

很庆幸,找到了 html2pdf.js,这个JavaScript库使用很方便,可以通过几行代码就能把它集成到wordpress中。

引入JavaScript文件

在使用 html2pdf 时,需要现在html文件中引入JavaScript文件html2pdf.bundle.min.js步骤如下:

  1. 在Github上Fork项目 eKoopmans/html2pdf.js

  2. 在Github上创建一个项目,命名为 zijinshi.github.io

  3. 在第2步创建的项目中,导入第1步创建的项目。

此时,我们就在github上创建了一个可以引入的JavaScript,URL为:https://zijinshi.github.io/dist/html2pdf.bundle.min.js

为什么不直接引入 eKoopmans/html2pdf.js 项目中的文件  https://raw.githubusercontent.com/eKoopmans/html2pdf.js/master/dist/html2pdf.bundle.min.js呢?

起初我也是这么做的,发现这个文件无法下载,在Google帮助下,找到了原因,可参见这篇文章: 把 css文件和 js文件放在 Github 里,可以在写网页的时候直接调用吗? 我就不赘述了。

当然,我们可以直接把这个JavaScript文件上传到wordpress的服务器上。

代码实现

接下来就是代码实现了。

1. 在wordpress的文章页面中引用JavaScript库。

 <script src="https://zijinshi.github.io/dist/html2pdf.bundle.min.js"></script>

2. 在以上代码的下方,创建生成PDF的函数。

 <script type="text/javascript">
   function createPdf( pdfname) {
   // Get the element.
    var element = document.getElementsByClassName('post')[0];
        html2pdf("").from(element).set({
          margin: 1,
          filename: pdfname,
          html2canvas: { scale: 4 },
          jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true}
        }).save();
   };
</script>

这段代码是先获取文章内容的element,然后把element元素渲染在Canvas上,最后把它生成为PDF。在把element渲染到Canvas上时,可以通过参数scale设置缩放比例,scale值越大,PDF越清晰,与之对应的,PDF文档越大。在权衡清晰度与文档大小之后,我把scale设置为4。

3.  最后,在需要生成PDF的地方,加入以下代码:

<a href="javascript:void(0)" onclick="createPdf('<?php  the_title() ?>' + '.pdf' )">
   <img alt="PDF版"
   src="https://delphi.zijinshi.org/wp-content/themes/start_spangled/img/pdf.png"
   title="PDF版" />
</a> 

其中,img元素是下载PDF的图标,它嵌套到一个超级链接中,当用户点击超级链接时,就会调用createPDF函数。生成的PDF文件名,就是原文章的标题名称。

这样,点击PDF的小图标,就可以生成PDF文档了,如下图中红色圈出来的部分: 

总结

这种方法优缺点都很明显。

优点是:

  • 实现方便,只需引用一个JavaScript文件,写几行代码就能实现;

  • 生成PDF的工作都在浏览器端完成,服务器没有任何并发压力。

缺点是:

  • ​PDF文件是通过图片生成的,文件比较大;
  • 清晰度不如文本;
  • ​换页时可能存在文字被割裂的情况。

如果以后有空,写个wordpress插件,使用 html2pdf.it 实现完美转换吧。

 

相关文章



请你留言