Reputation: 4430
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
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