Can't make it work just in the Browser

[apazadev]

Hi, can you make a simple demo for in the browser,

I've reached a point where the file .docx isn't recognized, if you try to execute check the console output
easyexample.zip

[alonrbar]

How are you trying to run it? If you are trying to run it as-is without a server it obviously won't work. The fetch function fetches things from remote locations. You can follow the instructions I wrote here to run it locally (it relies on Parcel for bundling and running a dev server) or learn how to use an HTML File Input with JavaScript to manually select templates.

[syonfox]

Ill also add this is using fancy es6 stuff so if you want to run it just normally in the browser you will want to transpile with something like babel grunt and webpack is a whole other beast but this got it working for me

ps if im wrong and theirs a way to just include it in an html page and have it work please enlighten me :)

https://stackoverflow.com/a/53736090/4530300

https://stackoverflow.com/a/53736090/4530300

gruntfile.js

 browserify: {
            easyreport: {

                files: {
                    // destination for transpiled js : source js
                    './build/browserify/EasyReport.js': './src/cjs/EasyReport.js'
                },
                options: {
                    transform: [['babelify', {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            ["@babel/transform-runtime"]
                        ]
                    }]],
                    browserifyOptions: {
                        debug: true
                    }
                }
            }
        },

then you can grunt browserify:easyreport

/src/cjs/EasyReport.js

import { TemplateHandler } from 'easy-template-x';

// 1. read template file

// (in this example we're loading the template by performing
//  an AJAX call using the fetch API, another common way to
//  get your hand on a Blob is to use an HTML File Input)
async function main() {
    console.log("Maiun")

    const response = await fetch('/img/report/<YOUR DOC.docx>');
    const templateFile = await response.blob();

// 2. process the template
    const data = {
     //<YOUR DATA>
    }

    const handler = new TemplateHandler();
    const doc = await handler.process(templateFile, data);

// 3. save output
    saveFile('myTemplate - output.docx', doc);

}
console.log("Setup EasyReport");
// document.getElementById('btn').addEventListener('click', ()=>{main()});
//
function saveFile(filename, blob) {

    // see: https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link

    // get downloadable url from the blob
    const blobUrl = URL.createObjectURL(blob);

    // create temp link element
    let link = document.createElement("a");
    link.download = filename;
    link.href = blobUrl;

    // use the link to invoke a download
    document.body.appendChild(link);
    link.click();

    // remove the link
    setTimeout(() => {
        link.remove();
        window.URL.revokeObjectURL(blobUrl);
        link = null;
    }, 0);
}

//this is how you set global variables
window.EasyReport = main;

Then in you html you just include you compiled source file like normal and add any global variable you defined in the source will be there. ie <script>EasyReport() // runs our code </script>