update pdf viewer page

src/pages/pdf/PdfMaintainPage/index.js

@@ -13,6 +13,7 @@ import {ThemeProvider} from "@emotion/react";
 import {useNavigate} from "react-router-dom";
 import {useForm} from "react-hook-form";
 import {useLocation, useParams} from "react-router-dom";
+import { base64ToBinary } from "../../../utils/CommonFunction";
 
 import { CollectionsBookmarkRounded } from '../../../../node_modules/@mui/icons-material/index';
 import LoadingComponent from "../../extra-pages/LoadingComponent";
@@ -26,6 +27,7 @@ function PDF() {
     const [adobeDCView,setAdobeDCView] = useState();
     const [pdfUrl, setPdfUrl] = useState();
     const [record, setRecord] = useState();
+    const [formName, setFormName] = useState();
     
     const navigate = useNavigate()
     const params = useParams();
@@ -42,26 +44,16 @@ function PDF() {
                 })
                 .then((response) => {
                     if (response.status === 200) {
-                        // setRecord(rec => {
-                        //     const { ["blobValue"]: _, ...newData } = response.data; // Destructure to remove blobValue
-                        //     return newData;
-                        // });
                         const res = response.data;
                         setRecord({ // WIP - allow to update all record
                             id : res.id,
                             clientId: res.clientId,
-                            templateId: res.templateId
+                            templateId: res.templateId,
                         })
+                        setFormName(res.filename);
 
                         //Convert Base64 to binary data
-                        const byteChar = atob(response.data.blobValue);
-                        const byteNum = new Uint8Array(byteChar.length);
-                        
-                        for (let i = 0; i < byteChar.length; i++) {
-                            byteNum[i] = byteChar.charCodeAt(i);
-                        }
-
-                        handlePdfUrl(byteNum);
+                        handlePdfUrl(base64ToBinary(res.blobValue));
                         setPdfLoaded(true);
                     }
                 })
@@ -72,8 +64,7 @@ function PDF() {
 
             } else {
                 axios.get(`${apiPath}${GET_PDF_TEMPLATE_PATH}`, {
-                // axios.get(`${apiPath}${GET_PDF_TEMPLATE_PATH}/${templateId}`, {
-                    responseType: 'arraybuffer', // Essential for binary data
+                    // responseType: 'arraybuffer', // Essential for binary data
                     params: {
                         templateId: templateId,
                         clientId: clientId,
@@ -81,7 +72,10 @@ function PDF() {
                 })
                 .then((response) => {
                     if (response.status === 200) {
-                        handlePdfUrl(response.data);
+                        const res = response.data;
+                        setFormName(res.filename);
+                        //Convert Base64 to binary data
+                        handlePdfUrl(base64ToBinary(res.blobValue));
                         setPdfLoaded(true);
                     }
                 })
@@ -129,7 +123,7 @@ function PDF() {
                     //   headers: [{ key: 'Authorization', value: `Bearer ${token}` }],
                     },
                 },
-                metaData: { fileName: 'document.pdf'/*templateName */ },
+                metaData: { fileName: formName },
                 },
                 {
                 embedMode: 'FULL_WINDOW',

src/utils/CommonFunction.js

@@ -201,6 +201,16 @@ export const base64ToBlob = (base64, type) => {
   return new Blob([byteNumbers], { type });
 };
 
+//Decode Base64 to binary value
+export const base64ToBinary = (base64) => {
+  const byteCharacters = atob(base64);
+  const byteNumbers = new Uint8Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+      byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  return byteNumbers;
+};
+
 //Convert Object list to id list
 export function getIdList(input) {
   const output = input.map(function (obj) {