React js 查看 docx blob 文件答案

【问题标题】：React js view docx blob fileReact js 查看 docx blob 文件
【发布时间】：2021-09-02 09:27:13
【问题描述】：

我可以使用以下模块docxtemplater 创建一个blob 类型的docx 文件，然后让用户可以下载该docx 文件。

这样：

var zip = new PizZip(content);
var doc = new Docxtemplater().loadZip(zip);
...
var out = doc.getZip().generate({
        type: "blob",
        mimeType:
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
saveAs(out, "output.docx");

然而，我想做的是让用户在创建过程中可以在浏览器上查看 docx 文件。

我想我会做这样的事情来创建一个 url blob： const objectURL = URL.createObjectURL(out);

但我找不到能够查看 docx 文件的方法。

如果有允许的模块，你能给我一些建议吗？

我尝试使用react-doc-viewer，但它不适用于 blob 文件。

【问题讨论】：

“不起作用”不是对问题的描述。请添加您遇到的问题的详细信息、错误消息、错误的输出结果等。

标签： javascript reactjs blob docx docxtemplater

【解决方案1】：

我认为 react-doc-viewer 需要将 docx 文件上传到服务器，然后你可以使用例如：

在这种情况下，我认为 react-doc-viewer 不会与 url 以外的东西一起使用。

import DocViewer from "react-doc-viewer";

function App() {
  const docs = [
    { uri: "https://my-website.com/uploaded-file.docx" },
  ];

  return <DocViewer documents={docs} />;
}

我在这里找到了：https://github.com/Alcumus/react-doc-viewer/blob/master/src/plugins/msdoc/index.tsx

他们的代码实际上是在使用 iframe ：

<IFrame
   id="msdoc-iframe"
   title="msdoc-iframe"
   src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
       currentDocument.uri
   )}`}
   frameBorder="0"
/>

【讨论】：

前几天我也发现，用office viewer传文件的url，google也有版本，不过我不想这样。原因很简单，我想确保每次用户修改 {name} 类型的字段时，文档都会显示在视图中，这样用户就可以看到它是如何做的。但我认为目前很难做到。