javascript - React js view docx blob file - Stack Overflow

admin管理员组

文章数量:1415645

I can create a docx file of type blob using the following module docxtemplater, and then give the user the possibility to download the docx file.

In this way:

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");

What I would like to do, however, is to give the user the possibility to view the docx file on the browser, during its creation.

I thought I would do something like this to create a url blob: const objectURL = URL.createObjectURL(out);

But I can't find a way to be able to view the docx file.

Can you give me some advice on how to do it, if there are modules that allow it.

I tried to use react-doc-viewer but it doesn't work with blob files.

I can create a docx file of type blob using the following module docxtemplater, and then give the user the possibility to download the docx file.

In this way:

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");

What I would like to do, however, is to give the user the possibility to view the docx file on the browser, during its creation.

I thought I would do something like this to create a url blob: const objectURL = URL.createObjectURL(out);

But I can't find a way to be able to view the docx file.

Can you give me some advice on how to do it, if there are modules that allow it.

I tried to use react-doc-viewer but it doesn't work with blob files.

• javascript
• reactjs
• blob
• docx
• docxtemplater

Share Improve this question Follow asked Jun 17, 2021 at 14:46 PaulPaul 4,5121515 gold badges6969 silver badges156156 bronze badges 1

• "Doesn't work" isn't a description of a problem. Please add the details of the issue you're having, error massages, incorrect output results, etc. – ISAE Commented Jun 17, 2021 at 17:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I think react-doc-viewer requires to upload the docx file to a server, then you can use for example :

I don't think that react-doc-viewer will work with things other than urls in this case.

import DocViewer from "react-doc-viewer";

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

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

I found out here : https://github./Alcumus/react-doc-viewer/blob/master/src/plugins/msdoc/index.tsx

That their code is actually using an iframe :

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

本文标签： javascriptReact js view docx blob fileStack Overflow