Question

我正在使用Morris.js创建折线图，该折线图是从MySQL数据库中检索数据的。我想将其下载为包含整个图表的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而不是回调。

这是save函数：

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

将Morris.js图表导出为PDF？

1 个答案:

将Morris.js图表​​导出为PDF？

1 个答案:

将Morris.js图表导出为PDF？