Search code examples
jsonstringstringifykonvajs

konva stage.toJSON is trimming all Text node when saving file


Every Konva Text gets trimmed(all white spaces removed) whenever I try to save the stage to JSON, here's my code :

var exportObj = stage.toJSON();
    console.log(exportObj);
    $("<a />", {
        "download": "yearBook.yrb",
        "href" : "data:application/json," + exportObj,
    }).appendTo("body")
            .click(function() {
                console.log("save");
        $(this).remove();
    })[0].click();

Solution

  • I think it is because of inserting JSON data to HTML (to DOM attribute href).

    Try to use this for 'href' attribute: "data:application/json;base64," + btoa(unescape(encodeURIComponent(exportObj)))

    var exportObj = stage.toJSON();
    console.log(exportObj);
    $("<a />", {
        "download": "yearBook.json",
        "href" : "data:application/json;base64," + btoa(unescape(encodeURIComponent(exportObj))),
    }).appendTo("body")
            .click(function() {
                console.log("save");
        $(this).remove();
    })[0].click();