How to preview pdf file using pdfjs in vue

Preface

In the process of writing a project, PDF files are occasionally used. When we want to view PDF files, do you download the PDF file first and then view the PDF file through the software installed on the computer specifically for opening PDFs? What if there is a requirement not to let users install software? After all, there are still many users who don’t know how to install software or what is required to open it. Ok, if there is such a demand, then we have to realize it. After all, we can’t refute this reason.

think

Now that it has been brought up, let’s think about how to use it. Since you need to use pdf. Is there any library file that can be operated by js to help me? Just search Baidu and you will find our protagonist today: pdfjs.

Library directory parsing and downloading

Now that we have a plan, let's study it. First, we need to download the file of this library. Download address: click here to download. There will be two versions of this page, one is compatible with the old version, you can download it according to your actual situation.

The downloaded code structure is as follows:

There are two folders in here:

• build This is the PDF core file
• Web Example

How to use

There are two ways to use it. One is to implement PDF preview by yourself through the core library file, and the other is to preview PDF files through the given examples. Here we will use the example given to preview the PDF file. If you are interested, you can study how to use the core file to implement it.

File Location

First, we need to put the downloaded files in the static directory of the Vue project, as shown below:

Actual call

Use the following method to call it where needed:

var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
window.open(window.location.origin + window.location.pathname+'static/pdfjs/web/viewer.html?file='+url)

The pdf address above is the path you put locally. The path here can be relative or absolute. The above is an absolute path.

At this time, you can see the following effect:

question

If the address of this PDF file and the address of the currently downloaded library file are in the same domain, there should not be any big problems. If they are in different domains, you need to solve the cross-domain problem. There is one thing that needs to be solved here, which is the library file we downloaded. Find the following content comment in the viewer.js file:

Annotate the contents in the red box in the above picture. If the server provides a download address, you can use iframe nesting to solve it.

Summarize

In fact, you can see that cross-domain knowledge is sometimes very useful. It is used above. When I first started working on it, I couldn’t get it out. Later I found that I couldn’t download it across domains. There are currently more usages and questions, and everyone is welcome to raise them.

The above is the details of how to use pdfjs in vue to preview pdf files. For more information about using pdfjs in vue to preview pdf files, please pay attention to other related articles on 123WORDPRESS.COM!