javascript - 如何使用 DOCX.JS 设置列大小

标签 javascript reactjs ms-word electron docx

我正在使用 Electron 和 React 创建一个应用程序,我需要动态创建一个 Word 文本文档,我找到了一个很棒的包 DOCX,但是我需要创建一些表格,并且我无法设置列,我需要帮助设置列的大小,遵循代码摘录和文档链接 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)
    })

}

最佳答案

您可能已经解决了这个问题。但对于其他寻找答案的人来说,这就是我所做的:

检查ITableCellOptions.width.WidthType以获取更多选项

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 })],
    });
  }),
});

关于javascript - 如何使用 DOCX.JS 设置列大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59340849/

相关文章:

vba - 尝试从 Excel VBA 保存 Word 文件,而不覆盖任何现有文件

c# - 用于 .NET 写入 Word 的最佳库和插件

Javascript 计算仅在 IE 中工作

javascript - 类型错误 : Cannot read property 'publish' of undefined in (ReactJS)

reactjs - 在 VS Code 扩展 Web View 中发出 GET 请求时出现证书错误

javascript - 如何在 createSlice 的 reducer 中获取状态值?

excel - 如何使用 VB 代码将 MS Excel 中的单元格中的值复制到 MS Word 文件中的字段中?

javascript - javascript 框架如何处理 304 未修改?

javascript - intro.js 显示和隐藏数据提示

javascript - Internet Explorer HTML5 视频仅在一段时间后才开始