Skip to content

Commit 2f9bb9b

Browse files
committed
docs: add develop pdf viewer article
1 parent 4e5d229 commit 2f9bb9b

2 files changed

Lines changed: 18 additions & 0 deletions

File tree

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# How to Develop a PDF Viewer
2+
3+
Developing a PDF viewer from scratch is a complex and very challenging task, your frontend skills alone will not be enough. You will need a good understanding of the PDF file format, rendering techniques, and performance optimization.
4+
5+
## 3 Major ways to Develop a PDF Viewer
6+
7+
### Based on images
8+
9+
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.
10+
11+
### Using PDF.js
12+
13+
[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 packa#ge provided is `pdfjs-dist/`, which only includes the core PDF rendering library without the viewer UI. The default viewer is built on the top of this core library and the whole UI code is not published as a separate package. It's the source of chaos in the ecosystem, but the bad news is that it's on purpose. They try to avoid people customizing the viewer too much to reduce maintenance burden.
14+
15+
### Buying a commercial solution
16+
17+
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).

docs/blog/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22

33
- [Three ways to Display PDF in HTML](/blog/3-ways-to-display-pdf-in-html)
44
- [Communication between the main and worker thread](/blog/communication-between-the-main-and-worker-thread)
5+
- [How to Develop a PDF Viewer](/blog/how-to-develop-a-PDF-viewer)

0 commit comments

Comments
 (0)