2015-05-04 210 views
2

我在舊版工具中使用Bootstrap 2.3來呈現涵蓋項目一頁的詳細信息。我正在嘗試將該單頁作爲可下載的PDF進行渲染。Bootstrap轉換爲PDF轉換

我嘗試了幾個工具,包括諸如DOM 2 PDF之類的東西,但它們需要非常基本的html元素。

我發現wkhtmltopdf並且在非常基本的層面上它似乎正確地呈現DOM,但我遇到了一些列問題。

它自己的頁面有3列結構,3-6-3。然而,當我渲染PDF時,它將所有的列變成12堆疊在一起。

這是頁面的外觀在我的UI: enter image description here

這是我的PDF看起來像出口後: enter image description here

從我可以告訴,它不使用 print CSS因爲

所以它會比現在更基礎。然而我不知道爲什麼它跨越了12列,而不是我設置它的方式。

是否有一些CSS我可以添加到列以使其呈現正確?

UPDATE

實際上,我是能夠通過使用插件,然後正確地呈現在頁面自定義視口大小。

+0

首先,你應該去與col-xs。這似乎是最好的列寬。我已經處理了相同的問題,並寫了我自己的CSS。我已經建立了三個文件,一個是通用打印的css,一個是a4,另一個是a3。要了解正在發生的事情,請參閱我的回購:https://github.com/hmt/sahib/tree/master/views但是,此回購是爲了顯示在html和css中創建的文檔。但轉換也是通過wkhtmltopdf以PDF。 – three

+0

你是否在使用Bootstrap 3 @three?我認爲2.3 – SBB

+0

不支持col-xs,BS3。我非常渴望推動這一知識,我錯過了那個重要的片段。 – three

回答

0

看起來像是在較低的視口寬度渲染。例如,您可以將列從col-md-6更改爲col-sm-6,以更改斷點。

+0

我認爲這將適用於BS3,但我被迫使用2.3這個工具,依靠跨越我相信? – SBB

1

您可以使用col-xs-*,因爲PDF包含A4尺寸。

+0

您能否請添加更多細節並解釋答案? – Ram