how to display a pdf on app directory?
Answered
Palomino posted this in #help-forum
PalominoOP
in earlier versions of next.js it was easy to embed a pdf file inside a page. but now when i pass a pdf's path to iframe, it doesn't render the pdf, it just downloads the file. the website i'm building is hosting papers from students of my school, so i need to display the content of these papers. how can i do that? any best practices? thanks in advance
Answered by joulev
because <iframe> should work the same way in any routers and in any rendering mechanisms
36 Replies
@Palomino in earlier versions of next.js it was easy to embed a pdf file inside a page. but now when i pass a pdf's path to iframe, it doesn't render the pdf, it just downloads the file. the website i'm building is hosting papers from students of my school, so i need to display the content of these papers. how can i do that? any best practices? thanks in advance
hm... im not sure if its to do with server components or its somethings thats changed in nextjs 13 but maybe try marking the component that is embedding the pdf as a client component using the "use client" directive at the first line of the file
@Palomino in earlier versions of next.js it was easy to embed a pdf file inside a page. but now when i pass a pdf's path to iframe, it doesn't render the pdf, it just downloads the file. the website i'm building is hosting papers from students of my school, so i need to display the content of these papers. how can i do that? any best practices? thanks in advance
Keep pdf renderer component diferrent, mark it as a client component. and use it in server component as child
@Palomino in earlier versions of next.js it was easy to embed a pdf file inside a page. but now when i pass a pdf's path to iframe, it doesn't render the pdf, it just downloads the file. the website i'm building is hosting papers from students of my school, so i need to display the content of these papers. how can i do that? any best practices? thanks in advance
iframe should work the same way in both app and pages routers. can you make a reproduction example?
PalominoOP
one more detail: papers are inside of public folder. so when i try iframe'ing it as a server component, it display a 404 page.
switched to "use client", got a blank page and a downloaded pdf.
switched to "use client", got a blank page and a downloaded pdf.
are you getting the file from external sources?
@joulev iframe should work the same way in both app and pages routers. can you make a reproduction example?
PalominoOP
the snippet is simple:
<iframe
className="border"
src="/abc.pdf"
/>@Palomino the snippet is simple:
ts
<iframe
className="border"
src="/abc.pdf"
/>
yes this should work everywhere, so can you grab a blank pdf from somewhere and make a reproduction repository?
most likely you messed up something weird here
because <iframe> should work the same way in any routers and in any rendering mechanisms
Answer
server/client components shouldn't matter here
@joulev server/client components shouldn't matter here
PalominoOP
oh, so it should work no matter what approach
btw try with a different pdf and also just opening the pdf directly from the file manager in the browser, if it opens correctly.
PalominoOP
yo, i think i solved it accidentally
had to see a different paper path with <embed />
i think it has to do with the pdf file itself
probably the content-type isnt "application/pdf" but something else which cant be embed
PalominoOP
now i get the thing
@Clown probably the content-type isnt "application/pdf" but something else which cant be embed
PalominoOP
you mean a pdf file may miss a application/pdf type?
PalominoOP
yeah, i think it's fine. getting a 304 with a pdf type ðŸ‘
now try with the one which was giving you the error
PalominoOP
nothing. a broken pdf then?
Does it work in browser/any pdf applications tho?
PalominoOP
let me check
no
So probably pdf is corrupt
its not corrupt. Maybe just some metadata issue ig
Noice, is your problem solved?
PalominoOP
yeah, <embed /> works on other papers aswell
thanks guys
Cool, mark the message that helped you to solve the problem, you can mark your message as well