javascriptreactjsms-wordelectrondocx

How to set column size using DOCX.JS

I am creating an application using electron and react, and I will need to create a Word text document dynamically, I found a great package, DOCX, but I need to create some tables, and I can't set the size of the columns, I need help setting the size of the columns, follows an excerpt from the code, and documentation link https://docx.js.org/#/

// eslint-disable-next-line
import { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, VerticalAlign, HeadingLevel } from 'docx';
const {dialog} = window.require('electron').remote;
const app = window.require('electron').remote
const fs = app.require('fs');

const doc = new Document();

export default function createDocx(){

    const table = new Table({
        rows: [
            new TableRow({
                children: [
                    new TableCell({
                        children: [new Paragraph({}), new Paragraph({})],
                        verticalAlign: VerticalAlign.CENTER,
                    }),
                    new TableCell({
                        children: [new Paragraph({}), new Paragraph({})],
                        verticalAlign: VerticalAlign.CENTER,
                    }),
                ],
            }),
            new TableRow({
                children: [
                    new TableCell({
                        children: [
                            new Paragraph({
                                text:
                                    "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah",
                                heading: HeadingLevel.HEADING_1,
                            }),
                        ],
                    }),
                    new TableCell({
                        children: [
                            new Paragraph({
                                text: "This text should be in ",
                            }),
                        ],
                        verticalAlign: VerticalAlign.CENTER,
                    }),
                ],
            }),
        ],
    });
doc.addSection({
    properties: {},
    children: [
        table
    ],  
});

    var options = {
        title: "Save file",
        defaultPath : "my_filename",
        buttonLabel : "Save",

        filters :[
        {name: 'docx', extensions: ['docx',]},
        {name: 'txt', extensions: ['txt',]},
        {name: 'All Files', extensions: ['*']}
        ]
    }


    // Used to export the file into a .docx fil    
    dialog.showSaveDialog(options, (fileName) => {
        if (fileName === undefined){
            console.warn("You didn't save the file");
            return;
        }       
    }).then(result => {
        const filename = result.filePath;
        Packer.toBuffer(doc).then((buffer) => {     
            fs.writeFile(filename, buffer, (err) => {
                if(err){
                    alert("Erro ao salvar o arquivo, causa: "+ err.message)
                }else{
                    alert("Arquivo Salvo com Sucesso !!");
                }                       
            });
        });  
    }).catch(err => {
        alert(err)
    })

}

Solution

  • You might've already solved it. But for other people looking for an answer, here is what I did:

    Check ITableCellOptions.width.WidthType for more options

    const columnTitles = ["Title1", "Title2", "Title3"];

const columnTitleRow = new TableRow({
  children: columnTitles.map((title) => {
    return new TableCell({
      // Make all cells the same with over 100% of the available page width
      width: { size: 100 / columnTitles.length, type: WidthType.PERCENTAGE },
      children: [new Paragraph({ text: title })],
    });
  }),
});