PDFs Served from Same react Project's Public Directory Trigger Download Instead of Loading in iframe #1598
Unanswered
abdalhalimalzohbi
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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());
};
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;
Beta Was this translation helpful? Give feedback.
All reactions