Hello,
I am wondering if anyone has any experience with mPDF. I’m trying to create a homepage using a responsive and interactive PDF, and then link off to my webflow e-commerce store. I tried to use Adobe API PDF embed, which doesn’t work with webflow, so someone suggested mPDF, but it is way over my head. Is it something that I would need to create separate hosting for? and then use my webflow e-commerce account as a subdomain like: store.mywebsite.com
The reason for this is that I think it’s interesting to for a website to load as a PDF that you can easily zoom, move around, and give a generally unique feel to looking at information online.
Any suggestions would be greatly appreciated.
Dylan
The installation process described in the mPDF documentation is not something that can be included in a Webflow hosting account and would need to be set up separately.
Do you have any examples of other websites built using PDFs in the way you describe?
Thanks Paul. This website uses the mPDF. LINK
To me this just looks like a regular PDF hosted online.
If you open this page in Edge then right click anywhere in the document and select “Save as” you can save the PDF to your computer.
Once the PDF (which is called mpd.pdf) is on your computer, right click the PDF and select “open with>Microsoft Edge”. You will see that the PDF looks exactly the same when it was opened on your computer as it did when you opened it from the website - so there is no “code” on the website that is making that happen.
Everything in the browser that lets you “zoom, move around, and give a generally unique feel” is automatically added by the browser when you directly view a PDF in the browser.
Each browser does this in a slightly different way and so the studiofff website will look different if you view it in Edge, Chrome or Firefox. That is because it is the browser that is adding the styling, not the website.
If you upload the mpd.pdf file to your Webflow website and open it directly in a browser (without adding it to a page) it should look exactly the same as it does on the studiofff website without having to add any plugins or additional code to your Webflow website.
Thank you very much for looking into it. I have tried to simply embed the pdf link into the webflow embed as code and it has worked with mixed results. I guess that will be the easiest way if I can get it to function well responsively. I will try to get a test up and send over the link. I don’t know enough of the coding aspect but used a different forum entry where people were trying to do just that for some simple code.
I guess my main point is that there was not any special code on the studiofff website that did anything to the PDF. That website was obviously configured to open up a PDF file by default instead of opening up a “Home” page which is the default for Webflow.
You may need to host the PDF file somewhere else and just include links in the PDF that point to your store.
I would be interested to see your test link when it is available.
Personally, this is just my opinion so please feel free to disagree! I don’t think putting a PDF online and using it as your home page, instead of a regular webpage, looks very professional. Customers usually have certain expectations that need to be met before they feel confident to make payments online. If you have an ecommerce store then you need to instill confidence in your website and if customers see that your webpage is “just a PDF” they may question how genuine your store is and be reluctant to make any purchases on your site. I would stick with a regular webpage. I think most visitors would be more impressed with a nicely designed Webflow page than just opening a PDF. Also, working with PDFs responsively is not something that is trivial to achieve, as this is inherently a static medium, and you may find this is more trouble than it is worth. Just my humble opinion. Hope this helps.
I agree! I appreciate your advice, but all the reasons you’ve listed are exactly why I like the PDF idea! I feel like websites are all the same and that this PDF load is both archaic and futuristic. You have certainly helped. Thank you!
Awesome. I would love to see the final website when it is done. 
Hi guys,
It’s amusing to see discourse.webflow.com still showing up in my analytics.… So I had to make an account to reply to you.
The thing about the PDF in browser is that you must understand that everything the browser display IS a website. There is no such thing as directly showing a PDF file without converting it to HTML first. It must be HTML CSS and JS or a browser can never display anything. The stack behind for the latest version was the following:
- A JavaScript library called PDFKit was used on the server to generate the PDF dynamically whenever a user visited the website.
- The actual content was managed using a file-based CMS.
- The PDF generator automatically added extra information to the PDF, such as today’s date or the weather forecast.
- This generated PDF was then sent to a frontend library, Mozilla’s PDF.js, which handled parsing and displaying the PDF within the browser.
It’s was a conceptual website: Websites and PDFs seem to be contradictory, but they share the same primary concept: to be a portable document with the exact same appearance on any device, operating system, or browser. By making the static dynamic, this online/offline symbiosis is challenged. The PDF file is designed to look like a website, incorporating current and common web design trends. However, by its nature of being a PDF file, it extends the framework of a website. Each page is easily rotatable, zoomable, downloadable, and printable. Its ability to represent dynamic data while being a static file makes it a unique fragment of time every time the visitor loads the domain.
After three years, I transitioned to a new website format—a whiteboard x). There is this fantastic open source tool called TLdraw. I find it really interesting that a website is the content management tool at the same time as it is the display, while potentially being open for collaboration and infinite in both the horizontal and vertical axes.
Cheers,
Fabian
from Another Code Project
formerly known as Studio FFF