Dynamically creating ODT using WebODF / Javascript

Question

Using javascript, I need to create an .odt file and populate the contents with data in javascript variables. The only thing that I have found that might work is WebODF. An example that seems similar to it is here.

When I am trying to do something similar to PDF with pdfkit (using node) I can do something like this:

PDFDocument = require('pdfkit');
var doc = new PDFDocument();
doc.pipe(fs.createWriteStream(fileName));
doc.text("Fist line");
doc.text("Second line");

Is it possible to do something similar to it using WebODF? I've found ops.OpInsertText, but I'm not sure how I can use it to actually insert text.

Again, ideally the solution is only in javascript.

Rohith K P · Answer 1 · 2017-03-15T10:13:28.790

This may help you.In this example I am attaching the Value returned from promt to the cursor position inside the webodf. You can similarly insert data to any other elements offest(). pressing crtl+space will show a promt, and whatever we type there is inserted to odf.

function insertBreakAtPoint(e) {
    var range;
    var textNode;
    var offset;
    var key = prompt("Enter the JSON Key", "name");
    {% raw %}
    var key_final = '{{address.'+key+'}}';
    {% endraw %} 

    var caretOverlay=$('.webodf-caretOverlay').offset();
    if (document.caretPositionFromPoint) {
        range = document.caretPositionFromPoint(
            caretOverlay.left, caretOverlay.top
        );
        textNode = range.offsetNode;
        offset = range.offset;
    } else if (document.caretRangeFromPoint) {
        range = document.caretRangeFromPoint(
            caretOverlay.left, caretOverlay.top
        );
        textNode = range.startContainer;
        offset = range.startOffset;
    }

    #only split TEXT_NODEs
    if (textNode.nodeType == 3) {
        var replacement = textNode.splitText(offset);
        var keynode = document.createTextNode(key_final);
        textNode.parentNode.insertBefore(keynode, replacement);
    }
}

function KeyPress(e) {
    var evtobj = window.event? event : e
    if (evtobj.keyCode == 32 && evtobj.ctrlKey) 
        insertBreakAtPoint();
}

document.onkeydown = KeyPress;

score 1 · Accepted Answer · edited May 23 '17 at 12:00

If I got your question right, you want to create a new file dynamically using data in JavaScript variable.

You ca refer this answer to load a file from javascript variable in form of byte Array. And this will get you up and running with a odt file ,which you can save to desired location.

function saveByteArrayLocally(error, data) {
    var mime = "application/vnd.oasis.opendocument.text";
    var blob = new Blob([data.buffer], {type: mime});

    var res = $http({
        method: 'POST', url: myWebServiceUrl,
        headers: {'Content-Type': undefined},
        data: blob
    });

    res.success(function(data, status, headers, config) {
        console.log(status);
    });
}

NOTE: You can use multer,express.js framework to design services as backend to save files.

Dynamically creating ODT using WebODF / Javascript

2 Answers2