wkhtmltopdf chartjs

opengps 发布于2019-08-02 16:11 / 991人阅读

摘要：背景前文提到了项目中引用了，几经尝试一度以为它们互不兼容。终于还是找到了它们配合的点。如果影响页面显示，建议给导出多带带做一个页面。表格过宽导致显示被截断，是由于设置了样式，将其调整为默认即可。所以就没有继续解决。

背景

前文提到了项目中引用了https://www.chartjs.org/，几经尝试一度以为它们互不兼容。百度谷歌了许久，又自己尝试了多次。终于还是找到了它们配合的点。

wkhtmltopdf

这里面使用的版本必须是https://github.com/wkhtmltopdf/wkhtmltopdf/releases/0.12.2.1

chartjs

好多文章说chartjs必须使用2.6.0版本，但是实测2.5.x和2.7.x都可以通过。下面是一个可以成功在pdf中显示的代码示例：



    chartJS PDF

样式调整

在实际导出时会遇到div间出现了半页的空白，这是由于div设置了overflow-x:visible样式，将其调整为默认即可。如果影响页面显示，建议给导出多带带做一个页面。

表格过宽导致显示被截断，是由于设置了white-space:nowrap样式，将其调整为默认即可。如果影响页面显示，建议给导出多带带做一个页面。

表格的内容过多大于一页时会出现在第二页的第一行重复显示标题且与第一行重叠。这里需要设置table样式thead, tfoot {display: table-row-group;}

表格的内容过多大于一页时会偶现一行内容被从中间截断，上下页各显示半行，体验特别不好。这里需要使用wkhtmltopdf的选项：

wkhtmltopdf --margin-top 10mm --margin-bottom 10mm https://www.baidu.com baidu.pdf

另外，建议开启打印模式，开启打印模式后，表格的奇偶行标色会失效，尝试了一段时间无果后点开chrome的打印预览看一下也会失效。所以就没有继续解决。

wkhtmltopdf --print-media-type --margin-top 10mm --margin-bottom 10mm --lowquality https://www.baidu.com baidu.pdf

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54818.html

wkhtmltopdf chartjs

摘要：背景前文提到了项目中引用了，几经尝试一度以为它们互不兼容。终于还是找到了它们配合的点。如果影响页面显示，建议给导出单独做一个页面。表格过宽导致显示被截断，是由于设置了样式，将其调整为默认即可。所以就没有继续解决。背景前文提到了项目中引用了https://www.chartjs.org/，几经尝试一度以为它们互不兼容。百度谷歌了许久，又自己尝试了多次。终于还是找到了它们配合的点。 ...

Simon_Zhou 2019-08-30 15:43 评论0 收藏0
wkhtmltopdf chartjs

摘要：背景前文提到了项目中引用了，几经尝试一度以为它们互不兼容。终于还是找到了它们配合的点。如果影响页面显示，建议给导出单独做一个页面。表格过宽导致显示被截断，是由于设置了样式，将其调整为默认即可。所以就没有继续解决。背景前文提到了项目中引用了https://www.chartjs.org/，几经尝试一度以为它们互不兼容。百度谷歌了许久，又自己尝试了多次。终于还是找到了它们配合的点。 ...

miguel.jiang 2019-08-23 16:45 评论0 收藏0
初识wkhtmltopdf

摘要：背景最近接到一个客户需求，要求将学生的考试结果分析表格和图表导出到。本着最好不要额外安装软件的原则，搜索过后分别尝试了等等。但是实现效果都与预期差距较大。它们是开源命令行工具，使用渲染引擎将呈现为和各种图像格式。它们不需要显示或显示服务。背景最近接到一个客户需求，要求将学生的考试结果分析表格和图表导出到PDF。表格使用的是普通的table，图表引用了https://www.char...

Towers 2019-08-02 16:11 评论0 收藏0
初识wkhtmltopdf

摘要：背景最近接到一个客户需求，要求将学生的考试结果分析表格和图表导出到。本着最好不要额外安装软件的原则，搜索过后分别尝试了等等。但是实现效果都与预期差距较大。它们是开源命令行工具，使用渲染引擎将呈现为和各种图像格式。它们不需要显示或显示服务。背景最近接到一个客户需求，要求将学生的考试结果分析表格和图表导出到PDF。表格使用的是普通的table，图表引用了https://www.char...

April 2019-08-30 15:43 评论0 收藏0
初识wkhtmltopdf

摘要：背景最近接到一个客户需求，要求将学生的考试结果分析表格和图表导出到。本着最好不要额外安装软件的原则，搜索过后分别尝试了等等。但是实现效果都与预期差距较大。它们是开源命令行工具，使用渲染引擎将呈现为和各种图像格式。它们不需要显示或显示服务。背景最近接到一个客户需求，要求将学生的考试结果分析表格和图表导出到PDF。表格使用的是普通的table，图表引用了https://www.char...

wushuiyong 2019-08-23 16:44 评论0 收藏0