3

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.

Paul
  • 3,644
  • 9
  • 47
  • 113
  • "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 Jun 17 '21 at 17:33

1 Answers1

2

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"
/>
edi9999
  • 19,701
  • 13
  • 88
  • 127
  • 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. – Paul Jun 18 '21 at 09:02
  • 1
    Have you found any solution yet? @Paul – phu.duongquoc Nov 28 '22 at 02:32