當使用wkhtmltopdf輸出爲PDF格式時，頁面上的高圖不能正確顯示

我的wkhtmltopdf頁面上有多個Highcharts圖表的PDF輸出缺少圖表的一些元素，主要是所有簡單的直線，包括刻度線，網格線，列邊框，圖例邊界和我的線/樣條曲線圖（數據點顯示）中的線條。當使用wkhtmltopdf輸出爲PDF格式時，頁面上的高圖不能正確顯示

我試圖用從其他棧的問題解決了這個問題，也就是將所有的系列以下的招數：

enableMouseTracking: false, 
shadow: false, 
animation: false

......以及那些設置在列/花鍵。沒有運氣。

這裏是link to an image of the browser page。

這是link to an image of the pdf output。

這是前兩個圖表的link to a gist of my chart options。

這是所有在Linux Ubuntu 12.04安裝在VirtualBox guest中的，使用截至兩天前的最新Highcharts下載和wkhtmltopdf版本0.10.0_rc2。對wkhtmltopdf的調用主要是通過Rails 3應用程序中的PDFKIT gem，但我已經在命令行直接調用了wkhtmltopdf，結果相同。

TIA任何幫助！

UPDATE：

我已經分離出的問題到HTML的一個特定摘錄圖表之前出現。我使用Twitter的引導CSS/JavaScript框架，該代碼會產生一組按鈕：

<div class='btn-group' data-toggle='buttons-radio'> 
    <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button> 
    <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button> 
    <button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button> 
    <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button> 
    <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button> 
</div>

具體來說，它是造成問題的.btn組標籤的存在 - 身上拿走，離開所有其他的東西都是這樣，並且PDF生成的頁面顯示與沒有提到的問題相同。此外，如果您將此片段移到圖表後的頁面上的任何位置，則一切正常。

我已經進一步將問題隔離到實際的html/css中，因爲當我完全禁用Bootstrap JavaScript函數時問題依然存在。

來源

2013-01-31 Yardboy

我有同樣的問題。有誰知道如何解決這個問題？ –

除了我的更新中提到的縮小範圍之外，我一直無法獲得任何內容。如果你刪除btn-group html內容，一切正常。 – Yardboy

我注意到，如果容器或容器的父級的兄弟姐妹在css中定義了邊框，那麼在這個頁面上圖表通常不能正確渲染。但並不總是;-) - 有些渲染得很好...... –

在wkhtmltopdf上報告了一個與您的案例非常相似的問題。見issue 689。 Wkhtmltopdf不能正確處理透明度/陰影，並可能導致不可預知的結果。

刪除svg中的所有筆畫不透明屬性並將其替換爲不透明屬性，然後將其發送到wkhtmltopdf。這段代碼將會訣竅。

nodes = document.querySelectorAll('*[stroke-opacity]'); 

for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) { 
    elem = nodes[nodeIter]; 
    opacity = elem.getAttribute('stroke-opacity'); 
    elem.removeAttribute('stroke-opacity'); 
    elem.setAttribute('opacity', opacity); 
}

來源

2013-02-01 12:32:05

謝謝你爲我着想。不幸的是，從剛剛添加到原始問題的進一步測試更新中可以看出，這看起來不是問題。 – Yardboy

很高興聽到你解決了這個問題。 –

那麼，到目前爲止，這是「發現問題」，但尚未「解決」。 ;） – Yardboy

當使用wkhtmltopdf輸出爲PDF格式時，頁面上的高圖不能正確顯示

回答

相關問題