Export to pdf on website

[thorst]

I'm trying to take the diagram and put it in a pdf. Any direction would be helpful.

I think it may be easier to generate a png or jpg on the website in mermaid, is that possible? I've tried to add the svg to the pdf and haven't been successful. I've also tried to take the long route and convert the svg to canvas and then to png and that hasn't gone well.

Ive been playing with pdfKit and jsPdf. I have the basic generation of the pdf fine it just that I cant get the mermaid diagram on the pdf.

[sooraj771989]

Did You Get the solution for this ? Please help me out

[thorst]

I'll post more details in a bit but basically I used pdfkit and then used svg-to-pdfkit and that worked. I would still like to know how to get a png out. What are you trying to do?

…

On Apr 18, 2017 7:39 AM, "Sooraj" ***@***.***> wrote: Did You Get the solution for this ? Please help me out — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#496 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABReppuyteRVXS-Z7O0QaP-pL4zHhsb3ks5rxKDYgaJpZM4MnIKE> .

[tylerlong]

There is a manual way: display mermaid charts in Chrome browser, then print the page, select destination as "save as PDF".

[thorst]

Using https://github.com/alafr/SVG-to-PDFKit and https://mozilla.github.io/pdf.js/

Semi-pseudo code

    <script src="~/Scripts/lib/SVG-to-PDFKit/pdfkit.js"></script>
    <script src="~/Scripts/lib/SVG-to-PDFKit/blobstream.js"></script>
    <script src="~/Scripts/lib/SVG-to-PDFKit/source.js"></script>

blobToBase64= function (blob, callback) {
        // Borrowed
        var reader = new FileReader();
        reader.onload = function () {
            var dataUrl = reader.result;
            var base64 = dataUrl.split(',')[1];
            callback(base64);
        };
        reader.readAsDataURL(blob);
    };
    Base64toArrayBuffer= function (base64_string) {
        // Borrowed
        var raw = window.atob(base64_string);
        var rawLength = raw.length;
        var array = new Uint8Array(new ArrayBuffer(rawLength));

        for (var i = 0; i < rawLength; i++) {
            array[i] = raw.charCodeAt(i);
        }
        return array;
    };

let doc = new PDFDocument({ compress: true });

let hiddenDiv = $("#hidden-div").html('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + app.mermaid.html + '</svg>');
            SVGtoPDF(doc, hiddenDiv[0].firstChild, doc.x, doc.y, { useCSS: true });
            doc.y = doc.y + (parseFloat($("#mermaidId0").attr("height")) * 72 / 96) // Best solution provided by developer

// Works on blob
        let stream = doc.pipe(blobStream());
        // Events are: "finish", "Data", "end"
        stream.on('finish', function () {

            // Convertintg blob to base64
            let blob = stream.toBlob('application/pdf');
            app.documentation.blobToBase64(blob, function (d) {

                // Put in global
                app.documentation.base64 = d;

                // Display in viewer
                var raw = app.documentation.Base64toArrayBuffer(app.documentation.base64);
                PDFViewerApplication.open(raw);

                // Overwrite filename for saving
                PDFViewerApplication.url = app.interface.current.name + ".pdf";
            });
        });

        // Close pdf document
        doc.end();

app.mermaid.html is a variable that contains the html of the mermaid. Basically i get the base64 pdf and save that off to a database for a revision history, I also render it using pdf.js (PDFViewerApplication).