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

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

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

3. Final effect

（1）txt

（2）word、xls、ppt

（3）pdf

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 ！