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>

  <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({
                    frame: {
                        position: {
                            x: 0,
                            y: 3000,
                        },
                        width: 4000,
                        height: 1000,
                        anchor: {
                            horizontal: docx.FrameAnchorType.MARGIN,
                            vertical: docx.FrameAnchorType.MARGIN,
                        },
                        alignment: {
                            x: docx.HorizontalPositionAlign.CENTER,
                            y: docx.VerticalPositionAlign.TOP,
                        },
                    },
                    border: {
                        top: {
                            color: "auto",
                            space: 1,
                            style: docx.BorderStyle.SINGLE,
                            size: 6,
                        },
                        bottom: {
                            color: "auto",
                            space: 1,
                            style: docx.BorderStyle.SINGLE,
                            size: 6,
                        },
                        left: {
                            color: "auto",
                            space: 1,
                            style: docx.BorderStyle.SINGLE,
                            size: 6,
                        },
                       ...