I want to render files in my Next.JS web application from a secure API. The API returns the the following data
{
"name": "Test1.docx",
"contentUri": ";,
"contentType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
}
I am using the react-doc-viewer NPM package. There is no issue with rendering unsecured files. Can anyone show me how to pass the authentication token to the API call with this package?
OR Is there any other way to render the files in the browser without having to download them on the client machine?
My code is
export default function Home() {
const docs = [
{ uri: '/test.pdf' }, // Local File
{ uri: '' }, // secure remote File
];
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>Document Viewer</h1>
<DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
</main>
</div>
);
}
I want to render files in my Next.JS web application from a secure API. The API returns the the following data
{
"name": "Test1.docx",
"contentUri": "https://api.mypurecloud.ie/api/v2/downloads/xxx",
"contentType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
}
I am using the react-doc-viewer NPM package. There is no issue with rendering unsecured files. Can anyone show me how to pass the authentication token to the API call with this package?
OR Is there any other way to render the files in the browser without having to download them on the client machine?
My code is
export default function Home() {
const docs = [
{ uri: '/test.pdf' }, // Local File
{ uri: 'https://url-to-my-pdf.pdf' }, // secure remote File
];
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>Document Viewer</h1>
<DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
</main>
</div>
);
}
-
It doesn't look like
react-doc-viewersupports that functionality. That package hasn't been updated for over a year, so I'd probably remend using another maintained lib, likereact-pdf, which provides that functionality. – juliomalves Commented Jan 13, 2022 at 16:15 - Hi @juliomalves react-pdf seems to support only pdf. I need to support for word, excel, pdf, images. Do you know any lib that supports these? – Nandkishor Yadav Commented Jan 14, 2022 at 17:23
2 Answers
Reset to default 2The react-doc-viewer doesn't have built-in support for sending additional headers (like an authorization header) along with its requests. However, there are a few ways you can work around this:
- Proxy Server: You could create a proxy server on your backend that fetches the document. This way, the client would request the document from your server, and your server would then make a separate request to the actual API. Your server would attach the necessary authorization header to this second request.
- Use another library to fetch the file data: Instead of letting react-doc-viewer handle the network request, you could use another library, such as axios, to fetch the file data from the API. You would pass the authorization header with this request. Once you have the file data, you can convert it to a Blob or a Data URL and pass it to react-doc-viewer.
Here's an example using axios:
import axios from 'axios';
import { useState, useEffect } from 'react';
import DocViewer, { DocViewerRenderers } from 'react-doc-viewer';
export default function Home() {
const [docs, setDocs] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await axios.get(
'https://api.mypurecloud.ie/api/v2/downloads/xxx',
{
headers: {
Authorization: 'Bearer your_token_here',
},
responseType: 'blob', // Important
}
);
const blob = new Blob([response.data], { type: 'application/pdf' });
const blobUrl = URL.createObjectURL(blob);
setDocs([{ uri: blobUrl }]);
};
fetchData();
}, []);
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>Document Viewer</h1>
<DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
</main>
</div>
);
}
In this example, we're using the useState and useEffect hooks from React to fetch the document when the ponent mounts. We're sending a GET request to the document URL and including the authorization header. We're also telling axios to treat the response as a Blob.
Then, we're creating a Blob from the response data and converting it to a Blob URL. We're setting this URL as the URI for react-doc-viewer.
This way, react-doc-viewer doesn't have to make any network requests and can just display the data we've already fetched.
you can use Access-Control-Allow-Origin in the headers of your request. this way:
'Access-Control-Allow-Origin': '*'
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745330888a4622870.html
评论列表（0条）