wkhtmltopdf chartjs

時間 2019-11-10

標籤 wkhtmltopdf chartjs 欄目 HTML 简体版

原文原文鏈接

背景

前文提到了項目中引用了https://www.chartjs.org/，幾經嘗試一度覺得它們互不兼容。百度谷歌了許久，又本身嘗試了屢次。終於仍是找到了它們配合的點。html

wkhtmltopdf

這裏面使用的版本必須是https://github.com/wkhtmltopdf/wkhtmltopdf/releases/0.12.2.1git

chartjs

好多文章說chartjs必須使用2.6.0版本，可是實測2.5.x和2.7.x均可以經過。下面是一個能夠成功在pdf中顯示的代碼示例：github

<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的打印預覽看一下也會失效。因此就沒有繼續解決。ajax

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

相關標籤/搜索

wkhtmltopdf

chartjs

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。