current position:Home>How does Vue Preview PDF, word, xls, PPT and txt files

How does Vue Preview PDF, word, xls, PPT and txt files

2022-04-29 17:26:23Billion cloud speed

vue How to preview pdf、word、xls、ppt、txt file

This article mainly explains “vue How to preview pdf、word、xls、ppt、txt file ”, Interested friends might as well come and have a look . The method introduced in this paper is simple and fast , Practical . Now let Xiaobian take you to learn “vue How to preview pdf、word、xls、ppt、txt file ” Well !

Say the method

1. Add... To the page iframe

src The address is the file address to be displayed

vue How to preview pdf、word、xls、ppt、txt file

So here I'm going to use theta elementui , If you use others, you also use iframe That's it

2. word、xls、ppt These documents

Use Microsoft's official preview address

Be careful :1. File address must be public network ;2. Do not have access to static resources

Last , All you control is src Address

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

vue How to preview pdf、word、xls、ppt、txt file

I just control here imgVisbleURL Variable then iframe Of src Just take the of this variable Address

3. Final effect

(1)txt

vue How to preview pdf、word、xls、ppt、txt file

(2)word、xls、ppt

vue How to preview pdf、word、xls、ppt、txt file

(3)pdf

vue How to preview pdf、word、xls、ppt、txt file

Here we are , I'm sure you're right “vue How to preview pdf、word、xls、ppt、txt file ” Have a deeper understanding of , You might as well put it into practice ! This is the Yisu cloud website , For more relevant contents, you can enter the relevant channels for inquiry , Pay attention to our , Continue to learn !

copyright notice
author[Billion cloud speed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291539467055.html

Random recommended