wkhtmltopdf chartjs

2024年4月23日 194次阅读 来源: yinfuyuan

背景

前文 提到了项目中引用了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中显现的代码示例：

<html>
<head>
    <title>chartJS PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
</head>
<body>

<!--必需运用设置了宽度和高度的div包住的canvas导出pdf时刻才会显现-->
<div style="width: 200px;height: 500px;">
    <canvas id="myChart" width="200px" height="500px" style="width: 200px; height: 500px;"></canvas>
</div>

<!--这类在div表面的纵然设置了宽度高度也不会在pdf中显现-->
<canvas id="badChart" width="200px" height="500px" style="width: 200px; height: 500px;"></canvas>

<script>

    // 官方示例中添加了这段代码 去掉后pdf不显现
    Function.prototype.bind = Function.prototype.bind || function (thisp) {
        var fn = this;
        return function () {
            return fn.apply(thisp, arguments);
        };
    };

    var ctx = document.getElementById("myChart").getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        }
        // 这里的option设置对pdf没有影响
    });

    var ctxm = document.getElementById("badChart").getContext('2d');
    new Chart(ctxm, {
        type: 'bar',
        data: {
            labels: ["NO","AF","GM","DA"],
            datasets: [{
                label: '',
                // backgroundColor: chartColors(),  如许的自定义猎取色彩的函数也会影响在pdf中显现
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                data: [1,2,3,4]
            }]
        }
    });

</script>
</body>
</html>

款式调解

  • 在现实导出时会碰到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
    原文作者：yinfuyuan
    原文地址: https://segmentfault.com/a/1190000018765608
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞