Download graph as well as table as a PDF

Question

I have a D3 chart and a bootstrap table. I want to download the graph and table as it looks on the HTMl page. I found some answers but they were for either Table download or graph download. I want a combined PDF for the same. I tried with jspdf but i am stuck.

Below is the link to the jsfiddle.

http://jsfiddle.net/xzZ7n/3301/

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
}

The backend is in spring MVC. Download functionality either in JQuery or JAVA is fine. Any help would be appreciated.

See http://stackoverflow.com/questions/30135765/save-a-pre-element-as-pdf-with-css — guest271314, Oct 26 '15 at 07:31

score 0 · Accepted Answer · edited May 23 '17 at 11:59

So out of curiosity and jumping through a lot of hoops, I'm not entirely sure if jsPDF is the most reliable. To start off, using d3.js renders your graph as an SVG so your best bet is to be converting your SVG into a PDF. I found this issue and it seems fromHTML is still a very new method (it isn't even in the internal documentation...).

They do mention they have support for an addSVG method but I have found that also might not be as ideal as you would like. It sounds like there is still some issues with it and you aren't alone in asking about SVG for this library.

After looking about I think this answer sums it up best -- checkout PDFKit which gives you a way to render SVG to PDF although after looking through the documentation, it seems they only allow you to draw? It doesn't show a way to just add an SVG to the PDF document. The answer also mentions a svgToPDF plugin for jsPDF but I looked and apparently this was merged a while ago so I'm not sure if it's actually a plugin or built in already.

Hope this gives more insight. I was curious about the question myself. I'll update this answer if I find better information.

Download graph as well as table as a PDF

1 Answers1