How to create pdf preview and download in htl

When looking for free and open source PDF processing libraries for the Web, PDF.js is usually a good option if you are willing to implement a user interface on your own or use its demo one.

In an earlier post, we showed how to render a PDF page in the browser with PDF.js and how to integrate their sample UI. In this blog post, we will see how to build a simple custom PDF viewer to display PDF documents on a page. The source code is available on codesandbox.io, and what’s shown below is the final result.

Our simple viewer can load PDF documents from a URL and has buttons to go to the next page or the previous page.

The example also shows a Page Mode feature that allows us to display multiple pages at once. Although we won’t discuss it in this article, its implementation is available in the codesandbox.io example.

At PSPDFKit, we build a rich, advanced web viewer. Feel free to check out our demo in case you are looking for a professional viewer with a solid API.

Initial Setup

Before we dive into the viewer implementation, we’re going to lay down a minimal HTML skeleton for our application:

We are using the CDN-hosted version of PDF.js from unpkg, but this file could also be downloaded and hosted locally.

Loading Documents

The function above accepts the URL of a PDF file. Since PDF.js will fetch the document making an Ajax request, our viewer needs to run on a web server. Otherwise, the browser will block the request for security reasons.

Inside , we get the document, save a reference to its instance and the count of the pages, and render the first page:

Rendering

Every time we call , our viewer renders the page at as follows:

retrieves the proxy object that allows us to work with a document page. We increment , since expects the page number instead of the page index.

Finally, we can render the given page:

returns a , which can be used to either determine when a page has finished rendering or abort the rendering process. In a real-world application, s can be useful for avoiding unnecessary work when quickly changing pages or zooming.

Changing Pages

To change pages, we create two buttons to increment or decrement the on click. We then call into again to render the page at the new :

In the snippet above, we assume that the increment/decrement is . In the codesandbox.io example you can see how, with the help of a cursor (), we handle navigation when is greater than .

Conclusion

Implementing a feature-rich PDF viewer is not a trivial and quick task, but as we have seen in this article, with relatively little work, we can not only build an application that can render a PDF document with one or multiple pages at the same time, but we can also add controls to change the page. Please check out the final result on codesandbox!

PDF.js is a good free option if you are willing to invest time into implementing a UI for it. The project comes with some examples and API docs — though they are currently incomplete.

At PSPDFKit, we offer a commercial, full-blown, and completely customizable PDF viewer that is easy to integrate and comes with well-documented APIs to handle the advanced use cases. Check out our demo to see it in action.