React js view docx blob file

Question

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.

"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
– ISAE, Commented Jun 17, 2021 at 17:33

edi9999 · Accepted Answer · 2021-06-18 08:55:15Z

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.com/uploaded-file.docx" }, ]; return <DocViewer documents={docs} />; }

I found out here : https://github.com/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.com/op/embed.aspx?src=${encodeURIComponent( currentDocument.uri )}`} frameBorder="0" />

I also discovered a few days ago, use the office viewer passing url of the file, there is also a version by google, but I don't want to do it this way. The reason is simple, I would like to make sure that every time the user modifies a field of type {name} the document is displayed in a view, so the user can then see how it is doing. But I think it's difficult at the moment to be able to do it.

Collectives™ on Stack Overflow

React js view docx blob file

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related