How does vue preview pdf, word, xls, ppt, txt files

This article mainly explains "how to preview pdf, word, xls, ppt, txt files by vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how vue previews pdf, word, xls, ppt and txt files.

Tell me about method 1. Add an iframe to the page

The src address is the address of the file to be displayed

I use elementui here. If you use other ones, you can also use iframe.

2. Files such as word, xls, ppt

To use Microsoft's official preview address

Note: 1. The file address must be on the public network; 2. Static resources do not have access

In the end, all you control is the src address

Microsoft parsing address: https://view.officeapps.live.com/op/view.aspx?src= your file address

Here I just control the imgVisbleURL variable, and then the src of iframe takes the address of this variable.

3. Final effect

(1) txt

(2) word, xls, ppt

(3) pdf

At this point, I believe you have a deeper understanding of "how vue previews pdf, word, xls, ppt, txt files". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!