使用PhantomJS生成單頁.pdf

我使用PhantomJS將可變高度的網頁導出爲pdf。由於pdf可以具有任何頁面大小（更像是比率，因爲它是矢量的），所以我想以一種可以在pdf中創建單個頁面的方式導出它，以適合整個網頁。使用PhantomJS生成單頁.pdf

幸運的是，使用evaluate PhantomJS方法我可以很容易地檢測頁面高度

page.includeJs('jquery.js', function() { 
    var pageHeight = page.evaluate(function() { 
    return $('#content').height(); 
    }); 
});

但是，我不知道我怎麼可以用它來我的優勢。 viewportSize似乎沒有任何影響，因爲我沒有渲染視口，而是整個文檔。我將它設置爲固定的{width: 800, height: 800}

所以我無法將頭圍繞paperSize大小。設置高度返回pageHeight將呈現1.5x頁面，所以我試着調整寬度，但它並沒有真正加起來，我可以理解的任何公式。

如何實現這一點，或者你有更深入的理解了paperSize屬性，並從頁面

來源

2013-08-24 treznik

不是問題，但感謝的焦點爲demoing的includeJS方法來顯示如何讓jQuery的成幻影js腳本！ – chiliNUT

viewportSize渲染的像素大小的範圍之間的關係的任何想法模擬窗口的大小，就像在傳統的瀏覽器。它由於HTML佈局而影響頁面的呈現，但不直接影響PDF呈現。

使用page.papersize可以定義網頁在呈現爲PDF時的大小。帶着幾分的jQuery，可以很容易地顯示網頁在一個文檔中，像這樣的：

var page = require('webpage').create(), 
    system = require('system'), 
    address, output; 

if (system.args.length != 3) { 
    console.log('Usage: spdf.js URL filename'); 
    phantom.exit(1); 
} else { 
    address = system.args[1]; 
    output = system.args[2]; 
    page.viewportSize = { width: 600, height: 600 }; 

    page.open(address, function (status) { 
     if (status !== 'success') { 
      console.log('Unable to load the address!'); 
      phantom.exit(); 
     } else { 
      var size = page.evaluate(function() { 
       return {width: width = $(document).width(), height : $(document).height() }; 
      }); 

      page.paperSize = size; 

      page.render(output); 
      phantom.exit(); 
     } 
    }); 
}

來源

2013-08-26 07:23:34 Cybermaxs

感謝您的評論，我試過這個，但由於某種原因，我的PDF最終將有2頁，1頁和半頁被我的頁面使用。即使寬度看起來好像比viewportSize.width小。它的行爲就好像它在某種程度上被放大了一樣，但我確保將zoomFactor設置爲1.任何想法爲什麼會發生這種情況，或者如何調試會發生什麼？ – treznik

同樣的問題正在發生在我身上。任何幫助，將不勝感激 –

看到這個：http://stackoverflow.com/a/14036545/1420669 –

擴展Cybermaxs'的答案，我加入

設定一個固定的寬度（36釐米與對應良好我的查看端口）和
一個單位的高度計算
設置邊距爲0px。

我不能給出一個很好的解釋，但它適用於我。

完整的腳本：

var page = require('webpage').create(), 
system = require('system'), 
address, output, size; 

if (system.args.length < 3 || system.args.length > 5) { 
    console.log('Usage: screenshot.js <URL> <filename>'); 
    phantom.exit(1); 
} else { 
    address = system.args[1]; 
    output = system.args[2]; 
    page.viewportSize = { width: 1280, height: 900}; 
    page.open(address, function (status) { 
     if (status !== 'success') { 
      console.log('Unable to load the address!'); 
      phantom.exit(); 
     } else { 
      window.setTimeout(function() { 
       page.includeJs("//code.jquery.com/jquery-1.10.1.min.js", function() { 
        var size = page.evaluate(function() { 
         return {width: width = "36cm", height : $(document).height()*2+400 + "px", margin: '0px' }; 
        }); 
        page.paperSize = size;   
        page.render(output); 
        phantom.exit(); 
       }); 
      }, 400); 
     } 
    }); 
}

來源

2014-03-25 17:25:53 Max

使用PhantomJS生成單頁.pdf

回答

相關問題