Newlines or break tags with docxtemplater

Question

I am using docxtemplater to convert JSON data to word document. Document is generating fine.

var sections = {"sections":[{"section_name":"Languages","data":"Tamil\nTelugu\nHindi\nEnglish","key":"8783"},{"section_name":"Skills","data":"JavaScript<br />jQuery<br />CSS<br />","key":"13486"}]};


 function loadFile(url,callback){
        JSZipUtils.getBinaryContent(url,callback);
    }

    loadFile("examples/doccc.docx",function(error,content){
        if (error) { throw error; };
        var zip = new JSZip(content);
        var doc=new Docxtemplater().loadZip(zip);
        doc.setOptions({nullGetter: function() {
           return ""; 
        }});
        doc.setData(sections);

        try {
            // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
            doc.render();
        }
        catch (error) {
            var e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties,
            };
            console.log(JSON.stringify({error: e}));
            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
            throw error;
        }

        var out=doc.getZip().generate({
            type:"blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        }); //Output the document using Data-URI
        saveAs(out,"output.docx");
    });

This is my template

{#sections}
    {section_name} - {data}
{/sections}

It generates the docx file with all the sections, but the "\n" new lines and
tags are printing literally in the document.

I need the new lines to be interpreted as new line.

Currently its printing as

Languages
Tamil\nTelugu\nHindi\nEnglish
Skills
JavaScript<br />jQuery<br />CSS<br />

in the word document.. Any idea how to print it as

Languages
Tamil
Telugu
Hindi
English

Skills
JavaScript
jQuery
CSS

Grateful for any help.

Answer 1

You can do :

In your template :

{#sections}
    {section_name} - 
{@data}
{/sections}

In your code, before setData :

sections.forEach(function(section){
    var lines = section.data.split("\n").split(/<br \/>|\n/g)
    var pre = "<w:p><w:r><w:t>";
    var post = "</w:t></w:r></w:p>";
    var lineBreak = "<w:br/>";
    section.data = pre + lines.join(lineBreak) + post;    
})