Vue-pdf preview file details

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

–

foreword

1. First of all, what is the working principle of vue-pdf?
2. What is its operating process?
3. What functions do we want to achieve, and what can it do for us?

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. First of all, what is the working principle of vue-pdf?

Vue-PDF receives the URL or ArrayBuffer data of a PDF document as input, uses the API provided by PDF.js to load the PDF document and parses various parts of the document, such as pages, bookmarks, outlines, etc., and uses CSS styles to control the style of the page and layout.

2. Use steps

1. Import library

The code is as follows (example):

npm install vue-pdf

I am here version 4.3.0

2. What is its operation process?

1. Load PDF document
2. Render PDF pages
3. Listen to user operation events
4. Update PDF page display content

3. What function do we want to use it for and what can it achieve for us?

First of all, the API provided by Vue-PDF is used to control the display, zoom, rotation, page turning, search and other operations of PDF documents.
Secondly, the API provided by Vue-PDF interacts with PDF documents, such as drawing marks on PDF pages, adding comments, saving changes, etc.
Give examples to illustrate the specific practices and applications in our project:

zoom in and zoom out, previous page and next page, etc.
The specific implementation code is as follows: (Zoom in and zoom out)

The specific implementation code of the previous page and the next page is as follows:

How to render files in the browser Question: (Key code)
// Get the file by calling the back-end API

Pass the obtained data to the following function to create a URL pointing to a Blob or File object. Blob is an immutable, primitive data type file-like object, and File object represents a readable and writable local file . The implementation code is as follows:

Finally, pass the obtained path to the pdf.createLoadingTask(pdfSrc) API to preview the PDF file.

Summarize

This is the end of the sharing for this issue. Regarding other API methods of vue-pdf preview, everyone is welcome to comment, share and exchange.