React js查看docx blob文件

Question

我可以使用docxtemplater模块创建一个类型为blob的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文件。

- Paul

---

"Doesn't work"不是一个问题的描述。请添加您遇到的问题细节，错误信息，不正确的输出结果等。 - ISAE

Answer 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"
/>

- edi9999

---

我几天前也发现了一个方法，使用办公室查看器传递文件的url，谷歌也有一个版本，但我不想这样做。原因很简单，我希望确保每次用户修改{name}类型的字段时，文档都会在视图中显示，以便用户可以看到它的执行情况。但我认为目前要做到这一点还是比较困难的。 - Paul

你找到解决方案了吗？@Paul - phu.duongquoc