javascript - 将 Morris.js 图表导出为 PDF？

Question

我正在使用从 MySQL 数据库检索数据的 Morris.js 创建折线图。我想将其下载为包含整个图表的 PDF 文件。

我试过使用 html2canvas 和 jsPDF 生成 PDF。但是，生成/下载的 PDF 不包含任何数据。

这是我的代码:

<?php 
    $connect = mysqli_connect("localhost", "root", "", "testing");
    $query = "SELECT * FROM purchase";
    $result = mysqli_query($connect, $query);
    $chart_data = '';

    while($row = mysqli_fetch_array($result))
    {
        $chart_data .= "{ year:'".$row["year"]."', profit:".$row["profit"].", purchase:".$row["purchase"].", sale:".$row["sale"]."}, ";
    }

    $chart_data = substr($chart_data, 0, -2);
?>

<div class="row">
    <div id="chart" style="width:800px;"></div>
    <canvas id="canvas" width="800px;"></canvas>
    <button onclick="save();">Download</button>  
</div>

Morris.Line({
    element : 'chart',
    data:[<?php echo $chart_data; ?>],
    xkey:'year',
    ykeys:['profit', 'sale'],
    labels:['Profit', 'Sale'],
    hideHover:'auto',
    stacked:true
});       

function save() {
    html2canvas(document.getElementById('canvas'), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            var doc = new jsPDF();
            doc.addImage(img, 10, 10);
            doc.save('test.pdf');
        }
    });
}

如有任何想法或建议，我们将不胜感激。

Answer 1

您不需要 canvas 元素，因为 html2canvas 会为您创建一个。

为了让它工作，我使用了最新的 html2canvas 版本 1.0.0-rc.1使用 promise而不是回调。

这是保存函数:

function save() {
    html2canvas(document.getElementById('chart')).then(canvas => {
        var w = document.getElementById("chart").offsetWidth;
        var h = document.getElementById("chart").offsetHeight;

        var img = canvas.toDataURL("image/jpeg", 1);

        var doc = new jsPDF('L', 'pt', [w, h]);
        doc.addImage(img, 'JPEG', 10, 10, w, h);
        doc.save('sample-file.pdf');
    }).catch(function(e) {
        console.log(e.message);
    });
}

完整的工作版本:JSFiddle