时间戳

首页 > 解决方案 > 将 Morris.js 图表导出为 PDF？

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

问题描述

我正在使用从 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');
        }
    });
}

任何想法或建议将不胜感激。

标签： javascripthtmljspdfhtml2canvasmorris.js

解决方案

您不需要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

推荐阅读