Examples of PDF document display function use in Vue

1. Introduction

In front-end development, sometimes you will encounter the need to display PDF documents on web pages. It is an open source PDF rendering library based on HTML5 developed by Mozilla. It allows us to directly display PDF files in our browser without the help of third-party plug-ins. This article explains in detail how to use it in Vue projects to present PDF documents.

2. Introduction

Have the following advantages:

• Cross-platform compatibility: Can work normally on multiple browsers and devices, providing a consistent PDF display experience for different users.
• No plug-ins required: Using HTML5 technology, render PDFs directly in the browser without the need for users to install additional plug-ins.
• Open source and customizable: The open source feature allows developers to customize and expand it according to their own needs.

3. Integrate in Vue project

3.1 Installation

First, make sure you have created a Vue project. Next, use npm or yarn to install:

npm install pdfjs-dist
# oryarn add pdfjs-dist

3.2 Create PDF display components

Create a component specifically for presenting PDFs in the Vue project. Here is a simple example

<template>
  <div ></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';

// Set the worker path = '///ajax/libs//2.16.105/';

onMounted(async () => {
  const pdfUrl = 'your_pdf_file.pdf'; // Replace with the actual PDF file path  const pdfContainer = ('pdf-container');

  try {
    // Load PDF file    const pdf = await (pdfUrl).promise;

    // traverse each page and render    for (let pageNumber = 1; pageNumber <= ; pageNumber++) {
      const page = await (pageNumber);
      const scale = 1.5;
      const viewport = ({ scale });

      const canvas = ('canvas');
      const context = ('2d');
       = ;
       = ;

      (canvas);

      // Render the page to the canvas      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await (renderContext).promise;
    }
  } catch (error) {
    ('An error occurred while loading PDF:', error);
  }
});
</script>

3.3 Use PDF to display components in the main component

Introduce and display the component in the main component using the PDF you just created:

<template>
  <div>
    <h1>PDF exhibit</h1>
    <PdfViewer />
  </div>
</template>

<script setup>
import PdfViewer from './';
</script>

4. Code explanation

3.1 Set the worker path

 = '///ajax/libs//2.16.105/';

Use Web Worker to handle PDF parsing, so set the path to the worker. Here, the worker file on the CDN is used, and you can also use the local worker file.

3.2 Loading PDF files

const pdf = await (pdfUrl).promise;

passgetDocumentThe method loads the PDF file of the specified URL. This method returns a promise. When the file is loaded, the PDF object can be obtained.

3.3 Rendering PDF pages

for (let pageNumber = 1; pageNumber <= ; pageNumber++) {
  const page = await (pageNumber);
  const scale = 1.5;
  const viewport = ({ scale });

  const canvas = ('canvas');
  const context = ('2d');
   = ;
   = ;

  (canvas);

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  await (renderContext).promise;
}

Iterate through each page of the PDF, get the viewport of each page, create a canvas, and render the page onto the canvas.

5. Optimization and expansion

5.1 Pagination display

Paging buttons can be added to enable users to load and view different pages on demand, rather than loading all pages at once, thereby improving performance.

5.2 Zoom function

Implement the scaling function, allowing users to adjust the display ratio of PDF documents for a better reading experience.

5.3 Error handling and prompts

Improve the error handling mechanism and provide users with clear error prompt information when an error occurs when loading a PDF file.

Conclusion

Used in Vue projects to easily implement the display of PDF documents. By installing, creating presentation components and using them in the main components, we can render PDF files directly in the browser. At the same time, it can also be optimized and expanded according to needs, such as adding pagination, scaling and other functions. This provides a powerful and flexible solution for handling PDF documents in front-end development.

This is the end of this article about using PDF document display function in Vue. For more information about Vue display PDF document content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!