我试图使用docx javascript library生成docx文件,但仅在客户端.

新文档的生成就像魅力一样,但我想修补一个文档使用patcher.文档仅显示了使用patchDocument(fs.readFileSync("My Document.docx")加载服务器端的代码.没有关于客户端使用的信息.

我试过使用以下代码:

fetch('./public/template.docx')
  .then(response => {
    if (!response.ok) {
      throw new Error('Failed to fetch template.docx');
    }
    return response.blob();
  })
  .then(blob => {
    console.dir(blob);
    const reader = new FileReader();
    reader.onload = function(event) {
        const arrayBufferData = event.target.result;
        console.log(arrayBufferData);

        patchDocument({
            outputType: "blob",
            data: arrayBufferData,
            patches: {
                title: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("NEUER TITEL")],
                },
                number: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("XX")],
                }
            },
        });

    };

    reader.readAsArrayBuffer(blob);
  })
  .catch(error => {
    console.error('Error fetching template.docx:', error);
  });

我得到了以下错误:

Uncatch(in promise)错误:无法读取"加载的zip file"的数据.它是支持的JavaScript类型(String、Blob、ArrayBuffer等)吗?` 在docx.js?v = ba760d4b:16887:43

但是在使用console.log判断之后,数据实际上是一个ArrayBuffer.我也try 输入blob,结果是一样的.我对node没有经验,也不知道fs.readFileSync会返回什么对象类型.但我猜这也是ArrayBuffer!错误还提到,它需要Blob或ArrayBuffer类型.

是我做错了什么,还是客户端不支持补丁程序?通过fs. readFileSync加载文件和从blob转换的ArrayBuffer在数据上是否存在差异?这两个不都是ArrayBuffer对象吗?

推荐答案

我终于发现了上面代码的问题.虽然上面的语法与文档中的语法相匹配,但它似乎只适用于以下语法:

fetch('./public/template.docx')
.then(response => {
    if (!response.ok) {
        throw new Error('Failed to fetch template.docx');
    }
    return response.blob();
})
.then(blob => {
    console.dir(blob);
    const reader = new FileReader();
    reader.onload = function (event) {
        const arrayBufferData = event.target.result;
        console.log(arrayBufferData);

        patchDocument(arrayBufferData, {
            outputType: "nodebuffer",
            patches: {
                title: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("NEUER TITEL")],
                },
                number: {
                    type: PatchType.PARAGRAPH,
                    children: [new TextRun("XX")],
                }
            },
        }).then(finaldata => {
            const blob = new Blob([finaldata], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
            // Now work with the data, e.g. download it.
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'output.docx';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        });

    };

    reader.readAsArrayBuffer(blob);
})
.catch(error => {
    console.error('Error fetching template.docx:', error);
});

这里的区别是数据作为第一个参数给出,其余的选项在对象中给出.在选项对象中使用data字段在客户端不起作用.我不确定这是一个bug还是我错过了一个明显的细节.

此外,我使用"nodebuffer"作为outputType,然后将其转换为Blob Object,

无论如何,我想分享解决方案,以防其他人遇到这个问题.

Javascript相关问答推荐

如何从对象嵌套数组的第二级对象中过滤出键

成帧器运动中的运动组件为何以收件箱开始?

警告!合同执行期间遇到错误[执行已恢复](Base Layer 2)

没有输出到带有chrome.Devtools扩展的控制台

将2D数组转换为图形

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

如何在输入元素中附加一个属性为checkbox?

如何在coCos2d-x中更正此错误

有条件重定向到移动子域

如何将数据块添加到d3力有向图中?

如何在JAVASCRIPT中合并两组对象并返回一些键

如何在DYGRAPS中更改鼠标事件和键盘输入

有效路径同时显示有效路径组件和不存在的路径组件

Reaction useState和useLoaderData的组合使用引发无限循环错误

如何在独立的Angular 应用程序中添加Lucide-Angel?

react 路由DOM有条件地呈现元素

如何在Java脚本中并行运行for或任意循环的每次迭代

无法使用Redux异步函数读取未定义的useEffect钩子的属性';map';

正则表达式以确定给定文本是否不只包含邮箱字符串

material UI自动完成全宽