preface

PDF (Portable Document Format) is a Document Format that is independent of application programs, hardware, and operating systems.

That is, PDF has display consistency. Unlike Word, Word applications are presented differently on different operating systems and often have missing fonts. Each PDF file contains a complete description of a flat document with a fixed layout, including text, glyphs, graphics, and other information to ensure consistency.

So PDF is great for presentation and printing, while Word is the first choice for writing and modifying documents. If you need to modify the PDF, you can convert it to Word first and then back to PDF.

In the web browser PDF is very common requirements, there are two main categories:

  1. Directly open the PDF file on the web page for browsing
  2. Embed PDF files in web pages as part of the page

Open A PDF file directly on a Web page: Nowadays, most modern browsers, such as Chrome and Sarafi, have built-in plug-ins to support PDF browsing. You can open a PDF file directly, while Internet Explorer may need to install plug-ins to open a PDF file.

Embed PDF files as part of a web page: This can be done by embedding iframes, but due to the browser’s same-origin policy, it’s almost impossible to customize the PDF display to make it more compatible with the page, such as background color, default text size, or banning printing and downloading.

The appearance of PDF.js is to unify the display of PDF in the browser (plug-in free), and provide more customized functions for Web developers.

What is pdF.js?

PDF. Js is a javascript library for displaying PDF files based on HTML5 technology. It can be used in modern browsers without installing any third-party plug-ins.

PDF. Js official website address

Pdf.js is mainly divided into three layers:

  • Core layer: Is responsible for parsing binary PDF and is the foundation of all layers. Developers generally don’t use this layer’s apis directly because they can change;
  • Display layer: Mainly based on the core layer, expose developers to some API interface to render PDF and get some file information. The pdF.js version number is also iterated based on this layer of API;
  • Viewer layer: Mainly on the basis of display layer, provides the DISPLAY of UI interface. If you want to build your own Viewer, this is a good starting point for making changes based on it that you can incorporate into your project.

How do I introduce pdF.js?

The pdF.js website is very concise and provides two main methods:

  • Import through CDN
  • Import by downloading the DIST file

It can also be introduced via NPM:

  • npm install pdfjs-dist

Here we only use the Viewer layer, so download the DIST file to import:

  1. Download stable Dist:

PS: If Android phones cannot display PDF, try downloading the one in the middle. (For older Browsers)

  1. Copy to project:

  1. Quote in the page:
<iframe class="iframe1" :src="'.. /.. /.. / static/PDFJS - 2.10.377 - dist/web/viewer. The HTML? file=xxxxxxx'" frameborder="0" width="100%" height="100%"></iframe>
Copy the code

Through the above three steps, you are ready to display the PDF on your page.

The effect can refer to the demo provided by the official website:

How to customize PDF presentation styles

Since we have file permissions in DIST, we theoretically have 100% autonomy.

  1. Let’s say we want to remove border effects from PDF pages

You can modify the view.css file:

.pdfViewer .page {
  direction: ltr;
  width: 816px;
  height: 1056px;
  margin: var(--page-margin);
  position: relative;
  overflow: visible;
  border: var(--page-border);
  background-clip: content-box;
  /* -o-border-image: url(images/shadow.png) 9 9 repeat; border-image: url(images/shadow.png) 9 9 repeat; * /
  /* background-color: rgba(255, 255, 255, 1); * /
}

Copy the code

Modified effect:

  1. Or we want to hide the toolbar:

You can modify view.css:

.toolbar {
  position: relative;
  left: 0;
  right: 0;
  z-index: 9999;
  cursor: default;
  /* Hide the toolbar */
  display: none;
}
Copy the code

These are just two simple examples of how to customize PDF styles, and there are many more possibilities for developers to explore.

conclusion

This paper mainly introduces:

  • PDF format is the document format with display consistency, suitable for display, while Word is the first choice for editing documents;
  • PDF file display problem: Some browsers need to install plug-ins to display PDF files; Unable to customize PDF presentation styles
  • PDF. Js is a library based on the HTML standard produced by Mozilla. It is mainly used to provide plugin-free, customization and other functions to solve the above problems.
  • The introduction of PDF.js includes CDN, NPM and DIST package. It mainly introduces how to introduce dist package in the project and how to customize the style.

Thank you for reading, I hope the introduction of the text can help you, welcome to like, comment exchange ~

The resources

  • Wikipedia -PDF
  • PDF vs DOC: When to Use Each
  • PDF. Js official website address
  • PDF. Js for personalized PDF rendering (Text Replication)