I’ve been wanting to revamp pdfobject.com to make it more modern and easier to read. This type of revamp is also a great way to stay up to date on the latest trends, like static site generators.
After surveying the field, I decided to play with some Vue-based platforms. (I enjoy Vue much more than React or Angular, and have used Vue 2 on a few projects.) Vue is very powerful, and platforms like VitePress make it really easy to create a clear and concise documentation site. Vitepress is also pretty flexible. Adding icons, images, SVGs, and more is a piece of cake. A PDF? Well… it’s complicated.
Like any HTML-based platform, you could simply add an iframe to your page, point the src at your PDF, and hope for the best. Based on my googling unscientific research, this appears to be a very common approach for Vue developers. The problem is that PDFs are not natively supported everywhere, especially on mobile devices. It’s much better than it used to be on desktop systems, but mobile is still the wild west for PDF support. This is where PDFObject comes in: it will check whether the visitor’s browser supports PDFs, and if PDF embedding is not supported, will allow you to display fallback content, such as a link to the PDF. PDFObject also helps specify a bunch of handy ‘open’ options, such as navigating to a specific page within the PDF when it’s opened, highlighting search terms, and whether to zoom in or not.
I decided to make it easy for everyone (especially me!) to embed PDFs in a Vue project, and whipped up an official PDFObject Vue component. Introducing: PDFObject-Vue, now available on GitHub and NPM. It’s dead simple to use: import the component via NPM, add it to your page, point to your PDF, and Bob’s your uncle. I created a barebones example project on GitHub if you’d like to give it a spin.