【Kafka】Html文件转成PDF文件

1. 背景

前几天登陆某网站看到几篇非常不错的Kafka文章,每次登陆阅读太麻烦,通过浏览器【文件->打印->预览】的方式导成PDF文件,发现只能导出当前页,滚动条余下几页无法导出,尝试了多种办法后,终于得到了解决

2. 具体操作

• 安装PhantomJS

  根据自己的系统环境下载安装文件【https://phantomjs.org/download.html】

• 安装Chrome插件

  插件下载连接【https://www.chromefor.com/save-page-we_v12-4/】

• 页面下载

  点击Chrome的右上角【Save Page WE】按钮,保存到指定目录 image.png

• 编写js文件

  代码大部分出自高人之手

  var page = require('webpage').create();
  var system = require('system');
  
  //读取命令行参数，也就是js文件路径。
  if (system.args.length === 1) {
   console.log('Usage: loadspeed.js <some URL>');
   phantom.exit();
  }
  page.settings.loadImages = true;  //加载图片
  page.settings.resourceTimeout = 30000;//超过10秒放弃加载
  //也可以指定具体的网页连接如: http://www.baidu.com
  var address = system.args[1];
  page.open(address, function(status) {
     function checkReadyState() {//等待加载完成将页面生成pdf
         setTimeout(function () {
             var readyState = page.evaluate(function () {
                 return document.readyState;
             });
             //根据页面中的元素自定义宽度与高度,目的是可随意生成想要的PDF文件
             var bb = page.evaluate(function () {
                 return document.getElementsByClassName('自定义元素')[0].getBoundingClientRect();
             });
             if ("complete" === readyState) {
  
                 page.paperSize = { width:'1500px',height:bb.height,orientation: 'portrait',border: '0cm' };
                 var timestamp = Date.parse(new Date());
                 // 自定义文件名
                 pdfname = 'HT_'+timestamp + Math.floor(Math.random()*1000000);
                 // 自定义文件生成路径
                 var outpathstr = "/Users/"+pdfname+".pdf";
                 page.render(outpathstr);
                 console.log("生成成功");
                 console.log("$"+outpathstr+"$");
                 phantom.exit();
  
             } else {
                 checkReadyState();
             }
         },1000);
     }
     checkReadyState();
  });
  

• 生成PDF文件

  由于下边的三个文件都在相同目录,直接运行即可,转换后的PDF文件,就保存在你自定义文件路径下

  ./phantomjs html2pdf.js PhantomJS.html