React js 查看 docx blob 文件

Question

我可以使用以下模塊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 文件。

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