JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

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>

  <body>

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

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

    <script>
      function generate() {
        const doc = new docx.Document({
          sections: [{
            properties: {},
            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,
                  }),
                ],
              }),
            ],
          }]
        });

        docx.Packer.toBlob(doc).then(blob => {
          console.log(blob);
          saveAs(blob, "example.docx");
          console.log("Document created successfully");
        });
      }

    </script>

  </body>

</html>