PDFs Served from Same react Project's Public Directory Trigger Download Instead of Loading in iframe

[abdalhalimalzohbi]

When I fetch a PDF from another server (e.g., a Node.js server), it works correctly. However, when I attempt to fetch a PDF from within the same project, specifically from the "public" directory, the PDF does not load in the iframe as expected; instead, it triggers a download.

import React, { useState, useEffect } from 'react';
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';

const DynamicPDF = () => {
// const [dynamicText, setDynamicText] = useState('Abdahalim ');
const [modifiedPdfUrl, setModifiedPdfUrl] = useState('');

useEffect(() => {
modifyPdf();
}, []);

const modifyPdf = async () => {
try {
const url = 'http://localhost:3000/abd1.pdf';
const existingPdfBytes = await fetch(url).then((res) => res.arrayBuffer());

  const pdfDoc = await PDFDocument.load(existingPdfBytes);


  const form = pdfDoc.getForm();
  const textField = form.createTextField('nom');
  textField.setText('');
  textField.addToPage(pdfDoc.getPage(0), {
    x: 150,
    y: 720,
    width: 165,
    height: 12,
    backgroundColor: rgb(1, 1, 1), // White background color
    textColor: rgb(0, 0, 0),
    borderWidth: 0, // No border
  });

  const textField1 = form.createTextField('med');
  textField1.setText('');
  textField1.addToPage(pdfDoc.getPage(0), {
    x: 150,
    y: 710,
    width: 165,
    height: 12,
    backgroundColor: rgb(1, 1, 1), // White background color
    textColor: rgb(0, 0, 0),
    borderWidth: 0, // No border
  });
  const textField2 = form.createTextField('date1');
  textField2.setText('');
  textField2.addToPage(pdfDoc.getPage(0), {
    x: 150,
    y: 699,
    width: 165,
    height: 12,
    backgroundColor: rgb(1, 1, 1), // White background color
    textColor: rgb(0, 0, 0),
    borderWidth: 0, // No border
  });
  const textField3 = form.createTextField('address');
  textField3.setText('');
  textField3.addToPage(pdfDoc.getPage(0), {
    x: 370,
    y: 721,
    width: 165,
    height: 13,
    backgroundColor: rgb(1, 1, 1), // White background color
    textColor: rgb(0, 0, 0),
    borderWidth: 0, // No border
  });
  const checkboxField = form.createCheckBox('newCheckbox');
  checkboxField.addToPage(pdfDoc.getPage(0), {
      x: 151,
      y: 592,
      width: 16.2,
      height: 10,
  });
  const textField4 = form.createTextField('Autres');
  textField4.setText('');
  textField4.addToPage(pdfDoc.getPage(0), {
    x: 240,
    y: 492,
    width: 250,
    height: 13,
    backgroundColor: rgb(1, 1, 1), // White background color
    textColor: rgb(0, 0, 0),
    borderWidth: 0, // No border
  });
  const textField5 = form.createTextField('diag');
  textField5.setText('');
  textField5.addToPage(pdfDoc.getPage(0), {
    x: 430,
    y: 683,
    width: 100,
    height: 15,
    backgroundColor: rgb(1, 1, 1), // White background color
    textColor: rgb(0, 0, 0),
    borderWidth: 0, // No border
  });


  const modifiedPdfBytes = await pdfDoc.save();
  const modifiedPdfBlob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
  const modifiedPdfUrl = URL.createObjectURL(modifiedPdfBlob);
  setModifiedPdfUrl(modifiedPdfUrl);
  // Do something with the modified PDF bytes, e.g., display in iframe or download
  console.log('Modified PDF URL:', modifiedPdfUrl);
} catch (error) {
  console.error('Error modifying PDF:', error);
}

};

return (

{/*

<input
type="text"
value={dynamicText}
onChange={(e) => setDynamicText(e.target.value)}
/>

*/}
<div style={{ margin: '15px 0px', display: 'flex', justifyContent: 'center' }}>
<iframe title="pdf-frame" width="75%" height="1200px" src={modifiedPdfUrl} />

);
};

export default DynamicPDF;