Streaming live at 10am (PST)

mPDF and the ability to display PDF's as responsive websites

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.

https://mpdf.github.io/installation-setup/installation-v7-x.html

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. :+1: