摘要:背景前文提到了项目中引用了,几经尝试一度以为它们互不兼容。终于还是找到了它们配合的点。如果影响页面显示,建议给导出多带带做一个页面。表格过宽导致显示被截断,是由于设置了样式,将其调整为默认即可。所以就没有继续解决。
背景
前文 提到了项目中引用了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/103242.html
摘要:背景前文提到了项目中引用了,几经尝试一度以为它们互不兼容。终于还是找到了它们配合的点。如果影响页面显示,建议给导出单独做一个页面。表格过宽导致显示被截断,是由于设置了样式,将其调整为默认即可。所以就没有继续解决。 背景 前文 提到了项目中引用了https://www.chartjs.org/,几经尝试一度以为它们互不兼容。百度谷歌了许久,又自己尝试了多次。终于还是找到了它们配合的点。 ...
摘要:背景前文提到了项目中引用了,几经尝试一度以为它们互不兼容。终于还是找到了它们配合的点。如果影响页面显示,建议给导出单独做一个页面。表格过宽导致显示被截断,是由于设置了样式,将其调整为默认即可。所以就没有继续解决。 背景 前文 提到了项目中引用了https://www.chartjs.org/,几经尝试一度以为它们互不兼容。百度谷歌了许久,又自己尝试了多次。终于还是找到了它们配合的点。 ...
摘要:背景最近接到一个客户需求,要求将学生的考试结果分析表格和图表导出到。本着最好不要额外安装软件的原则,搜索过后分别尝试了等等。但是实现效果都与预期差距较大。它们是开源命令行工具,使用渲染引擎将呈现为和各种图像格式。它们不需要显示或显示服务。 背景 最近接到一个客户需求,要求将学生的考试结果分析表格和图表导出到PDF。表格使用的是普通的table,图表引用了https://www.char...
摘要:背景最近接到一个客户需求,要求将学生的考试结果分析表格和图表导出到。本着最好不要额外安装软件的原则,搜索过后分别尝试了等等。但是实现效果都与预期差距较大。它们是开源命令行工具,使用渲染引擎将呈现为和各种图像格式。它们不需要显示或显示服务。 背景 最近接到一个客户需求,要求将学生的考试结果分析表格和图表导出到PDF。表格使用的是普通的table,图表引用了https://www.char...
摘要:背景最近接到一个客户需求,要求将学生的考试结果分析表格和图表导出到。本着最好不要额外安装软件的原则,搜索过后分别尝试了等等。但是实现效果都与预期差距较大。它们是开源命令行工具,使用渲染引擎将呈现为和各种图像格式。它们不需要显示或显示服务。 背景 最近接到一个客户需求,要求将学生的考试结果分析表格和图表导出到PDF。表格使用的是普通的table,图表引用了https://www.char...
阅读 126·2024-11-06 13:38
阅读 527·2024-09-10 13:19
阅读 705·2024-08-22 19:45
阅读 1309·2021-11-19 09:40
阅读 2424·2021-11-18 13:14
阅读 4216·2021-10-09 10:02
阅读 2214·2021-08-21 14:12
阅读 1229·2019-08-30 15:54