Skip to content

Commit 0887725

Browse files
committed
chore: update header level
1 parent 34b0eab commit 0887725

1 file changed

Lines changed: 11 additions & 13 deletions

File tree

docs/blog/how-to-develop-a-pdf-viewer.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,49 +13,47 @@ Developing a PDF viewer from scratch is a complex and very challenging task, you
1313

1414
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.
1515

16-
## Four Major Ways to Develop a PDF Viewer
17-
18-
### Based on image
16+
## Based on image
1917

2018
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.
2119

22-
### Using PDF.js
20+
## Using PDF.js
2321

2422
[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.
2523

26-
### Three ways to integrate PDF.js
24+
## Three ways to integrate PDF.js
2725

28-
#### Embedding with iframe
26+
### Embedding with iframe
2927

3028
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.
3129

32-
#### Using `@document-kits/viewer`
30+
### Using `@document-kits/viewer`
3331

3432
[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.
3533

36-
#### Building your own viewer based on `pdfjs-dist/`
34+
### Building your own viewer based on `pdfjs-dist/`
3735

3836
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.
3937

40-
### Using Compiled PDFium Wasm
38+
## Using Compiled PDFium Wasm
4139

4240
> “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.”
4341
4442
[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.
4543

46-
### Related Projects
44+
Here are some awesome projects related to PDFium Wasm:
4745

48-
#### [PDFium Library](https://github.com/paulocoutinhox/pdfium-lib)
46+
### [PDFium Library](https://github.com/paulocoutinhox/pdfium-lib)
4947

5048
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.
5149

52-
#### [EmbedPDF](https://www.embedpdf.com/)
50+
### [EmbedPDF](https://www.embedpdf.com/)
5351

5452
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.
5553

5654
![EmbedPDF Viewer](/assets/embed_pdf_viewer.png)
5755

58-
### Buying a commercial solution
56+
## Buying a commercial solution
5957

6058
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).
6159

0 commit comments

Comments
 (0)