Paul
Paul

Reputation: 4430

React js view docx blob file

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.

Upvotes: 4

Views: 9418

Answers (1)

edi9999
edi9999

Reputation: 20554

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

Upvotes: 3

Related Questions