You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/blog/how-to-develop-a-pdf-viewer.md
+11-13Lines changed: 11 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,49 +13,47 @@ Developing a PDF viewer from scratch is a complex and very challenging task, you
13
13
14
14
This article is the overview for a series: each major approach below will have its own independent, deep-dive post. Links will be added as the series is published.
15
15
16
-
## Four Major Ways to Develop a PDF Viewer
17
-
18
-
### Based on image
16
+
## Based on image
19
17
20
18
Convert each page of the PDF into an image (e.g., PNG or JPEG) on the server side. Then, display these images in a web application using HTML `<img>` tags or a JavaScript image viewer library. This approach is relatively simple but may not provide the best user experience, especially for large documents. It's not extensible and all other features like text selection, search, annotations, etc. will be limited to what you can do with images.
21
19
22
-
###Using PDF.js
20
+
## Using PDF.js
23
21
24
22
[PDF.js](https://mozilla.github.io/pdf.js/) is an open-source project developed by Mozilla built using HTML5 technologies. It allows you to render PDF documents directly in the browser. The limitation of this approach is that PDF.js is not developer-friendly, the official default viewer is not easy to integrate into existing applications, and customizing it can be challenging. The official package provided is `pdfjs-dist/`, which only includes the core PDF rendering library without the viewer UI. The default viewer is built on top of this core library and lives in the PDF.js repository, but the UI code isn't published as a separate package. This setup causes confusion in the ecosystem, and the bad news is that it's on purpose: they try to avoid people customizing the viewer too much to reduce maintenance burden.
25
23
26
-
###Three ways to integrate PDF.js
24
+
## Three ways to integrate PDF.js
27
25
28
-
####Embedding with iframe
26
+
### Embedding with iframe
29
27
30
28
You can use the default viewer provided by PDF.js by embedding it in an `<iframe>`. This is the easiest way to get started, but it offers limited customization options.
31
29
32
-
####Using `@document-kits/viewer`
30
+
### Using `@document-kits/viewer`
33
31
34
32
[This](https://priestch.github.io/document-viewer/) project is an open-source PDF viewer built on top of PDF.js. It provides an out-of-the-box PDF viewer that is easy to integrate into any web application. It is framework-agnostic and supports multiple documents, custom toolbars, and easy synchronization with upstream PDF.js code. You can check the [Get Started Guide](https://priestch.github.io/document-viewer/docs/get-started.html) to learn how to use it.
35
33
36
-
####Building your own viewer based on `pdfjs-dist/`
34
+
### Building your own viewer based on `pdfjs-dist/`
37
35
38
36
If you want full control over the viewer UI and functionality, you can build your own PDF viewer using the `pdfjs-dist/` package. This requires substantial effort, deep knowledge of PDF.js internals, strong frontend development skills, and performance optimization expertise. You'll need to implement navigation, zooming, text selection, annotations, and more from scratch.
39
37
40
-
###Using Compiled PDFium Wasm
38
+
## Using Compiled PDFium Wasm
41
39
42
40
> “Foxit is honored to be chosen as the PDF provider for the open-source PDFium project,” says Eugene Xiong – Founder and Chairman of the Board at Foxit. “Our high performance, highly accurate, and platform independent software technology will help developers everywhere to incorporate powerful PDF technology when creating innovative applications.”
43
41
44
42
[PDFium](https://pdfium.googlesource.com/pdfium/) is an open-source PDF rendering engine first developed by [Foxit](https://www.foxit.com/nl/company/press/5606.html), then acquired by Google. It is used in the Chrome browser and other applications. PDFium can be compiled to WebAssembly (Wasm), allowing it to run in web browsers. This approach provides an alternative to PDF.js for rendering PDF documents in the browser. However, integrating PDFium into a web application can be complex and may require significant effort to set up and optimize. The Wasm only provides the rendering engine, and you still need to build the viewer UI and other features on top of it.
45
43
46
-
### Related Projects
44
+
Here are some awesome projects related to PDFium Wasm:
A project that provides precompiled PDFium WebAssembly module for easy integration into web applications. It simplifies the process of using PDFium in the browser by providing a ready-to-use Wasm module. There is a [web demo](https://pdfviewer.github.io/) available to show how you can use it to display a PDF file.
51
49
52
-
####[EmbedPDF](https://www.embedpdf.com/)
50
+
### [EmbedPDF](https://www.embedpdf.com/)
53
51
54
52
An Open Source PDF viewer also built using PDFium Wasm. It provides a polished, production-ready PDF viewer that drops into your app in seconds. Perfect for standard use cases. You can build your own custom viewer UI from scratch based on their render engine, or using their default viewer.
55
53
56
54

57
55
58
-
###Buying a commercial solution
56
+
## Buying a commercial solution
59
57
60
58
There are several commercial PDF viewer solutions available. You can see [commercial pdf viewers](/blog/3-ways-to-display-pdf-in-html#commercial-pdf-viewer).
0 commit comments