Morris Graphs Export as PDF?

问题

I am using Morris.js to create graphs. I have requirement to export graphs as pdf. I can see that graphs are svg elements. What should i do to achieve this.

回答1:

I took one of the Morris samples and made a fiddle for you:

http://jsfiddle.net/1roLdqte/48/

I added a simple call to format to PDF the existing div with just the morris chart:

$('#print').click(function () {
printMe();
});
function printMe() {
  xepOnline.Formatter.Format('line-example',{render:'download', srctype:'svg'});
 }

Run the fiddle and push the PDF button.

Note there are many more parameters available here, you can format much more content than just the morris.js chart, control page sizes, add header/footers and such. This only formats the chart alone (srctype:'svg') to PDF as a vector image (not raster).

回答2:

It works. I tried with morris.js v0.5.0 and Raphael 2.1.2.

Add this to where you have your chart(for example your controller):

$scope.pdf = function(chartName){
    printMorris(chartName);
};

function printMorris(chartName) {
    xepOnline.Formatter.Format(chartName, {render:'download', srctype:'svg'});
}

xepOnline.jqPlugin.008.js is wrong. To resolve the error: "Uncaught TypeError: Cannot read property 'length' of null on xepOnline.jqPlugin.008.js:166", change the code in xepOnline.jqPlugin.008.js.

Add this in line 166. This will skip the length when "rules" is null.

        if(rules === null)
            continue;

Now, the code in function togglePrintMediaStyle in xepOnline.jqPlugin.008.js:

togglePrintMediaStyle: function() {
    if($('head style[data-xeponline-formatting]').length > 0) {
        $('head style[data-xeponline-formatting]').remove();
        return;
    }
    var printrules = [];
    for(var x=0;x<document.styleSheets.length;x++) { 
        var rules=document.styleSheets[x].cssRules;
        var rule=[];
        if(rules === null)
            continue;
        for(var x2=0;x2<rules.length;x2++) {

            if(rules[x2].media && rules[x2].media && (rules[x2].media[0] === 'print' || 
                rules[x2].media && rules[x2].media.mediaText === 'print')) {
                for(var x3=0;x3<rules[x2].cssRules.length; x3++) {
                    rule.push(rules[x2].cssRules[x3]);
                }
            }  else if (rules[x2].parentStyleSheet.media[0] && 
                    rules[x2].parentStyleSheet.media[0] === 'print' ||
                    (rules[x2].parentStyleSheet.media && 
                        rules[x2].parentStyleSheet.media.mediaText === 'print')) {
                rule.push(rules[x2]);
            }
        }
        for(var x2=0;x2<rule.length;x2++) {
            printrules.push(rule[x2].cssText);  
        }
    }

    // write print media styles to head
    var html = '\n<style type="text/css" data-xeponline-formatting="true">\n';
    for(var x=0; x<printrules.length; x++) {
        html+='.xeponline-container ' + printrules[x] + '\n';
    }
    html += '</style>\n';
    $('head').append(html);
},

来源：https://stackoverflow.com/questions/25236937/morris-graphs-export-as-pdf

标签

javascript

pdf-generation

morris.js

css-to-pdf