摘要:背景前文提到了項目中引用了,幾經(jīng)嘗試一度以為它們互不兼容。終于還是找到了它們配合的點。如果影響頁面顯示,建議給導(dǎo)出多帶帶做一個頁面。表格過寬導(dǎo)致顯示被截斷,是由于設(shè)置了樣式,將其調(diào)整為默認即可。所以就沒有繼續(xù)解決。
背景
前文 提到了項目中引用了https://www.chartjs.org/,幾經(jīng)嘗試一度以為它們互不兼容。百度谷歌了許久,又自己嘗試了多次。終于還是找到了它們配合的點。
wkhtmltopdf這里面使用的版本必須是https://github.com/wkhtmltopdf/wkhtmltopdf/releases/0.12.2.1
chartjs好多文章說chartjs必須使用2.6.0版本,但是實測2.5.x和2.7.x都可以通過。下面是一個可以成功在pdf中顯示的代碼示例:
樣式調(diào)整chartJS PDF
在實際導(dǎo)出時會遇到div間出現(xiàn)了半頁的空白,這是由于div設(shè)置了overflow-x:visible樣式,將其調(diào)整為默認即可。如果影響頁面顯示,建議給導(dǎo)出多帶帶做一個頁面。
表格過寬導(dǎo)致顯示被截斷,是由于設(shè)置了white-space:nowrap樣式,將其調(diào)整為默認即可。如果影響頁面顯示,建議給導(dǎo)出多帶帶做一個頁面。
表格的內(nèi)容過多大于一頁時會出現(xiàn)在第二頁的第一行重復(fù)顯示標題且與第一行重疊。這里需要設(shè)置table樣式thead, tfoot {display: table-row-group;}
表格的內(nèi)容過多大于一頁時會偶現(xiàn)一行內(nèi)容被從中間截斷,上下頁各顯示半行,體驗特別不好。這里需要使用wkhtmltopdf的選項:
wkhtmltopdf --margin-top 10mm --margin-bottom 10mm https://www.baidu.com baidu.pdf
另外,建議開啟打印模式,開啟打印模式后,表格的奇偶行標色會失效,嘗試了一段時間無果后點開chrome的打印預(yù)覽看一下也會失效。所以就沒有繼續(xù)解決。
wkhtmltopdf --print-media-type --margin-top 10mm --margin-bottom 10mm --lowquality https://www.baidu.com baidu.pdf
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/54818.html
摘要:背景前文提到了項目中引用了,幾經(jīng)嘗試一度以為它們互不兼容。終于還是找到了它們配合的點。如果影響頁面顯示,建議給導(dǎo)出單獨做一個頁面。表格過寬導(dǎo)致顯示被截斷,是由于設(shè)置了樣式,將其調(diào)整為默認即可。所以就沒有繼續(xù)解決。 背景 前文 提到了項目中引用了https://www.chartjs.org/,幾經(jīng)嘗試一度以為它們互不兼容。百度谷歌了許久,又自己嘗試了多次。終于還是找到了它們配合的點。 ...
摘要:背景前文提到了項目中引用了,幾經(jīng)嘗試一度以為它們互不兼容。終于還是找到了它們配合的點。如果影響頁面顯示,建議給導(dǎo)出單獨做一個頁面。表格過寬導(dǎo)致顯示被截斷,是由于設(shè)置了樣式,將其調(diào)整為默認即可。所以就沒有繼續(xù)解決。 背景 前文 提到了項目中引用了https://www.chartjs.org/,幾經(jīng)嘗試一度以為它們互不兼容。百度谷歌了許久,又自己嘗試了多次。終于還是找到了它們配合的點。 ...
摘要:背景最近接到一個客戶需求,要求將學(xué)生的考試結(jié)果分析表格和圖表導(dǎo)出到。本著最好不要額外安裝軟件的原則,搜索過后分別嘗試了等等。但是實現(xiàn)效果都與預(yù)期差距較大。它們是開源命令行工具,使用渲染引擎將呈現(xiàn)為和各種圖像格式。它們不需要顯示或顯示服務(wù)。 背景 最近接到一個客戶需求,要求將學(xué)生的考試結(jié)果分析表格和圖表導(dǎo)出到PDF。表格使用的是普通的table,圖表引用了https://www.char...
摘要:背景最近接到一個客戶需求,要求將學(xué)生的考試結(jié)果分析表格和圖表導(dǎo)出到。本著最好不要額外安裝軟件的原則,搜索過后分別嘗試了等等。但是實現(xiàn)效果都與預(yù)期差距較大。它們是開源命令行工具,使用渲染引擎將呈現(xiàn)為和各種圖像格式。它們不需要顯示或顯示服務(wù)。 背景 最近接到一個客戶需求,要求將學(xué)生的考試結(jié)果分析表格和圖表導(dǎo)出到PDF。表格使用的是普通的table,圖表引用了https://www.char...
摘要:背景最近接到一個客戶需求,要求將學(xué)生的考試結(jié)果分析表格和圖表導(dǎo)出到。本著最好不要額外安裝軟件的原則,搜索過后分別嘗試了等等。但是實現(xiàn)效果都與預(yù)期差距較大。它們是開源命令行工具,使用渲染引擎將呈現(xiàn)為和各種圖像格式。它們不需要顯示或顯示服務(wù)。 背景 最近接到一個客戶需求,要求將學(xué)生的考試結(jié)果分析表格和圖表導(dǎo)出到PDF。表格使用的是普通的table,圖表引用了https://www.char...
閱讀 1940·2021-10-11 10:59
閱讀 1046·2021-09-07 09:59
閱讀 2244·2021-08-27 16:17
閱讀 2793·2019-08-30 15:54
閱讀 2283·2019-08-30 12:58
閱讀 1786·2019-08-30 12:53
閱讀 1479·2019-08-28 18:13
閱讀 739·2019-08-26 13:35