JSFiddle - React, Tailwind, and code Playground

by gaurav_ashara

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src="https://unpkg.com/[email protected]/build/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
  </head>
<script>


  var xhr1= new XMLHttpRequest();
  xhr1.open('GET', 'https://github.com/dolanmiu/docx/blob/master/demo/dotx/template.dotx?raw=true', true);
  if (xhr1.overrideMimeType) {
    xhr1.overrideMimeType('text/plain; charset=x-user-defined');
  }

  xhr1.onreadystatechange = function(e) {
    if (this.readyState == 4 && this.status == 200) {

      window.docData=this.response;
      }
  };
  xhr1.send();
  
 </script>
  <body>

    <h1>DOCX browser Word document generation</h1>

    <button type="button" onclick="generate()">Click to generate document</button>

    <script>
            function generate() {

                const importDotx = new docx.ImportDotx();
                 importDotx.extract(window.docData).then((templateDocument) => {
                    const doc = new docx.Document({
                        sections: [
                            {
                                children: [
                                    new docx.Paragraph({
                                        children: [
                                            new docx.TextRun("Hello World"),
                                            new docx.TextRun({
                                                text: "Foo Bar",
                                                bold: true,
                                            }),
                                            new docx.TextRun({
                                                text: "\tGithub is the best",
                                                bold: true,
                                            }),
                                        ],
                                    }),
                                ],
                            },
                        ],
             ...