WebViewer Version: 8.11.0
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No
Please give a brief summary of your issue:
(Think of this as an email subject)
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Hello,
I am using PDFTRON Webviewer to display pdf files in a modal view. My project is working properly in localhost. But it displays a blank modal page after it deployed in AWS amplify.
The folder structure is as mentioned in the pdftron documentation. During deployment I am getting a different index.html file as response. So, the pdftron webviewer is not getting rendered. Is this happening due to the optimized build.
I have attached my code, path directory image and my response during deployment for your reference.
Kindly help me with the above mentioned query. As this matter is urgent, I would appreciate a response as soon as possible.
import ReactPlayer from "react-player";
import * as React from "react";
import WebViewer from "@pdftron/webviewer";
import { Dialog } from "@mui/material";
import { makeStyles } from '@mui/styles'
import Loading from "./loading";
const useStyles = makeStyles(() => ({
pdfStyle: {
height: '90vh'
},
videoStyle: {
overflowY: "hidden"
}
}))
export default function CustomModal(props) {
const classes = useStyles()
const viewer = React.useRef(null);
const { fileUrl, type, toggleModal, filesActionList } = props;
React.useEffect(() => {
if (type && type === "application/pdf" && fileUrl!==null) {
WebViewer({
path: '/webviewer/lib',
initialDoc: fileUrl,
disabledElements: ["header", "toolsHeader"],
}, viewer.current).then((instance) => {
const { documentViewer } = instance.Core;
})}
}, [fileUrl, type])
return (
<Dialog
fullWidth={true}
maxWidth="md"
open={type}
onClose={toggleModal}
>
{(type && type === "link" && fileUrl) ? (
<ReactPlayer
className={classes.videoStyle}
url={fileUrl}
controls="true"
width="100%"
height="calc(91vh - 100px)"
onError={(e)=>{
filesActionList()
}}
/>
)
: (type && type === "application/pdf" && fileUrl) ? (
<div ref={viewer} className={classes.pdfStyle}></div>
) : (
<Loading />
)}
</Dialog>
);
}
customModal.js (1.7 KB)