Good evening. Is it possible to upload a pdf file to a Webflow made website, where it can be viewed on the page, without having to download it to read? Thanks.
1 Like
This post from a while back might be if interest to you.
1 Like
Drew shared a good thread.
TLDR; from
https://pdfobject.com/
**0. Install pdfobject.js to your project / github / cdn **
1. Create a container to hold your PDF
<div id="pdf_wrapper"></div>
2. Tell PDFObject which PDF to embed, and where to embed it
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#pdf_wrapper");</script>
NOTE: reference pdfobject.js cdn for the js OR copy the '<'script>into the head tag.
3. You can optionally use CSS to change the appearance of the containing element, such as height, width, border, margins, etc.
<style>
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
</style>
There are also alternative ways to do this
Embed
<embed src="../pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
IFRAME
<iframe src="../pdf/sample-3pp.pdf#page=2" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it:
<a href="../pdf/sample-3pp.pdf">Download PDF</a></iframe>
@miekwave it looks like you’re hosting custom JS files directly in webflow? If that’s the case how did you do it? It also looks like you have figured out how to create a URL that ends in .pdf? if that’s the case how did you do it?!?
Hi @elof
Its not hosted in webflow, but you can host it anywhere, even Google Drive, but I reccomend GITHUB or your own ftp server if you have one.
Here’s a thread by @samliew about hosting js files on GITHUB.
After you repo on github you can reference script github/path/script.js in head, embed or body.
Good luck!
A better solution is to upload your pdf in the assets tab and get the webflow cdn link of that asset and then embed the pdf using a <> HTML Embed element, Eg:
The code snippet will look something like this