Facing 403 Error with Office Files Preview (docx/xlsx/pptx) and AbortError

[521guyu]

`import React from "react";
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
//import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import Doc from "./assets/test.docx";
// 设置 PDF.js worker 路径
//pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
function FileViewer() {
const docs = [
{ uri: require("./assets/test.docx") ,fileType: "docx"}, // Local File
];

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

}
export default FileViewer;`
Description:

I encountered an error when using the latest react-doc-viewer to preview PDF files. I managed to fix it by adding the following configuration for pdfjs-dist:

import * as pdfjsLib from 'pdfjs-dist/build/pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";

However, I cannot preview Office files (docx, xlsx, pptx). The console shows these errors:

1. GET https://view.officeapps.live.com/op/zh-CN/strings.js 403 (Forbidden)

My Question:

1. Could you please tell me which version of react-doc-viewer can successfully preview pptx, xlsx, and docx files?
2. I followed the documentation but still couldn't get it to work, which is very confusing. Are there any known working configurations for Office files?
3. If this is a persistent issue with the library, are there any other recommended libraries that can serve as a reliable alternative for previewing these file types (especially docx, xlsx, pptx) in a React application?

Thank you for your help!

---

[ocjctujk]

I am also facing the same situation, it works for pdf, but not for docx files

[ocjctujk]

This worked for me, also remove already added styles.
It just worked after I added fileType.
Without fileType, it throws me a signal error.
Also, look if it is a cors problem or not.

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

function App() {
const docs = [{ uri: "https://calibre-ebook.com/downloads/demos/demo.docx",fileType: "docx", fileName: "demo.docx" }];

return ;
}
export default App;

[521guyu]

This worked for me, also remove already added styles. It just worked after I added fileType. Without fileType, it throws me a signal error. Also, look if it is a cors problem or not.

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

function App() { const docs = [{ uri: "https://calibre-ebook.com/downloads/demos/demo.docx",fileType: "docx", fileName: "demo.docx" }];

return ; } export default App;

It seems to be an issue with my file link. On your end, can you preview a local docx file? I followed the method described in the md document: const docs = [ { uri: require("./example-files/pdf.pdf") }, // Local File ]; but I’m still getting the error: errorpage.htm?llcc=z…b012-102d40b37856:1 GET https://view.officeapps.live.com/op/zh-CN/strings.js 403 (Forbidden).

[ocjctujk]

That's because you are trying to use a local file, which is supported by React Doc Viewer, but there are some limitations based on file type.
For example, docx, xlsx, etc. These types must use a URL that is publicly available (not local).
I hope I was able to solve your query.

https://www.reddit.com/r/reactjs/comments/15a3kfo/displaying_fetched_msoffice_files_ppt_docx_xlsx/

[521guyu]

That's because you are trying to use a local file, which is supported by React Doc Viewer, but there are some limitations based on file type. For example, docx, xlsx, etc. These types must use a URL that is publicly available (not local). I hope I was able to solve your query.

https://www.reddit.com/r/reactjs/comments/15a3kfo/displaying_fetched_msoffice_files_ppt_docx_xlsx/

Thank you for the clear explanation. It helps me understand the limitation regarding local files and public URLs for certain file types. I appreciate your help.