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>
/*    const str = await fetch(
      "https://thumbs.dreamstime.com/z/healthy-body-4000017.jpg"
    ).then((r) => {
      return r.blob();
    });
    
    var reader = new FileReader();
			reader.readAsDataURL(str);
    reader.onloadend = function () {
      var base64data = reader.result;
      console.log(base64data);
    };*/
      function generate() {
       
       
        const borders = {
          top: {
            style: docx.BorderStyle.SINGLE,
            size: 1,
            color: "000000",
          },
          bottom: {
            style: docx.BorderStyle.SINGLE,
            size: 1,
            color: "000000",
          },
          left: {
            style: docx.BorderStyle.SINGLE,
            size: 1,
            color: "000000",
          },
          right: {
            style: docx.BorderStyle.SINGLE,
            size: 1,
            color: "000000",
          },
        };


        const noBorderTable = new docx.Table({
          borders: borders,
          width: {
            size: "100%",
            type: docx.WidthType.PERCENTAGE,
          },
          rows: [
            new docx.TableRow({
              height: { value: 100},
              tableHeader: true,
              children: [
                new docx.TableCell({
                  children: 
                  [new docx.Paragraph({

                    children: [
                      new docx.TextRun({
                        text: "Thèmes / Date / Lieux",
                        color: "ffffff",
                        bold: true,
                        size: 16,
                        font: {
    ...