Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to realize the preview function of various types of files in vue3. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Preview of 1.office document types

The first thing I saw was the preview of word excel and other document files. I searched for some methods on the Internet at the beginning of the problem. After all, I have little experience. Some people recommend a tag to download the preview directly, which obviously does not meet our expectations. Some people recommend excel to use sheetjs, but we word also need to find another way. Finally, I decided to use Microsoft's online preview and use iframe as a carrier.

What needs to be considered is that in the dialog pop-up box of my element-plus at that time, iframe could not support the parent element very well, so I filled in some code. And the loading process is relatively slow, so due to time reasons, we do not consider trying other methods.

Preview of the 2.pdf typ

For this kind of pdf preview, it feels good to solve, ah, to use the previously used npm install pdfjs-dist, it will be done. I never thought that I currently do not support vue3, so it is natural to report a mistake as soon as I come up. Resolutely Baidu, Baidu told me that this pdfjs-dist vue3 does not support it. I *, use you to say that I want to find a solution. After the protagonist comes to download, put the build and web folders under our public file to make a reference, pay attention to whether your address is correct. I put it in an embed.

Data.pdfUrl ='. / pdf/web/viewer.html?file='+type; / / online preview 3. Picture type

I think we don't need to say much about this type, just go to the code and deal with url.

4. Video Typ

For the video type, I originally intended to directly use the video element to put it in, but I am a programmer who pursues my own ideal. I just start to use vue-video-palyer for video preview, but I just don't want to, and I report an error in vue3. To put it bluntly, baby, it doesn't support vue3? It's okay. I'm used to it. I recommend a wave of vue-vam-video.

Npm install vue-vam-video-simport VamVideo from "vue-vam-video" Components: {VamVideo,}, setup (props,context) {const data = reactive ({videoOption: {properties: {poster:', src: "", preload: "auto", / / loop: "loop", / / autoplay: "autoplay" / / muted:true}, videoStyle: {width: "100%", / / height: "600px",}, controlsConfig: {fullScreenTit: "full screen", EscfullScreenTit: "exit full screen", speedTit: "double speed" YinliangTit: "volume", jingyinTit: "mute", playTit: "play", pauseTit: "pause", fullScreen:true, speed:true, listen:true}},})} 5. Audio Typ

After suffering from the above losses, I finally decided to use the audio tag and use it directly.

On "vue3 how to achieve various types of file preview function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.