1. 背景

前幾天登陸某網(wǎng)站看到幾篇非常不錯(cuò)的Kafka文章,每次登陸閱讀太麻煩,通過瀏覽器【文件->打印->預(yù)覽】的方式導(dǎo)成PDF文件,發(fā)現(xiàn)只能導(dǎo)出當(dāng)前頁,滾動(dòng)條余下幾頁無法導(dǎo)出,嘗試了多種辦法后,終于得到了解決

2. 具體操作

• 安裝PhantomJS

  根據(jù)自己的系統(tǒng)環(huán)境下載安裝文件【https://phantomjs.org/download.html】

• 安裝Chrome插件

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

• 頁面下載

  點(diǎn)擊Chrome的右上角【Save Page WE】按鈕,保存到指定目錄
  image.png

• 編寫js文件

  代碼大部分出自高人之手

  var page = require('webpage').create();
  var system = require('system');
  
  //讀取命令行參數(shù)，也就是js文件路徑。
  if (system.args.length === 1) {
   console.log('Usage: loadspeed.js <some URL>');
   phantom.exit();
  }
  page.settings.loadImages = true;  //加載圖片
  page.settings.resourceTimeout = 30000;//超過10秒放棄加載
  //也可以指定具體的網(wǎng)頁連接如: 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;
             });
             //根據(jù)頁面中的元素自定義寬度與高度,目的是可隨意生成想要的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文件

  由于下邊的三個(gè)文件都在相同目錄,直接運(yùn)行即可,轉(zhuǎn)換后的PDF文件,就保存在你自定義文件路徑下

  ./phantomjs html2pdf.js PhantomJS.html