Examples of Preview Function for Various Types of Files in vue3

Directory Preface 1. Preview of office Document Type
2. Preview of pdf type
3. Type of picture
4. Video type
5. Audio type
Summarize

Preface

It's hard to cross the river by feeling Stone. I heard that the bosses of big factories are busy upgrading the project with vue3, and I have nothing to do. Being in a small factory is still unwilling to toss about. Do a new project, directly on vue3, hot-headed, some people may be reckless, but stumbling or basically finished, then record 1

Today, let's talk about a certain function in the development process! Anyway, it takes a lot of time. Let's talk about the functional requirements first: You can click on the file list after uploading files to preview, including file media types including pictures, word excel and other document files, and the preview of pdf, video and audio is aimed at pc

1. Preview of 1. office document type

The first thing you see is a preview of document files such as word excel. To change the problem or search for a number of methods on the Internet, after all, I have little experience, some people recommend a tag directly download preview, obviously not in line with our expectations, some people recommend excel to use sheetjs, but we also need to find another method for word, finally I decided to use Microsoft's online preview, using iframe as a carrier

<iframe  frameborder="0" 
:src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'>
</iframe>

What needs to be considered is that in the dialog bullet box of element-plus at that time, iframe could not spread the parent element well, so I filled in one more code. And the loading process is slow, so no attempt of other methods is considered due to time

2. Preview of pdf type

For this preview of pdf, It feels easy to solve, Use the previously used npm install pdfjs-dist, It's over when you start, I never expected that I didn't support vue3 at present, so it's only natural to report an error when I run up. Decisive Baidu ah, Baidu told me that this pdfjs-dist vue3 does not support it, also, change the method, I ***, with you say I want to find a solution, the protagonist to download after the build and web folder in our public file to do a reference, pay attention to their address is not right, I put in an embed

  data.pdfUrl = './pdf/web/viewer.html?file='+type;  //  Online preview 

 <embed  :src="pdfUrl" style="width: 100%; "/>

3. Type of picture

I think this type, we don't have to say much, just go to the code, and deal with url under 1

<div v-if="showImg == true" class="dialog-body-content-base-style">
    <el-image
        class="image-preview"
        :src="imgUrl"
        />
</div>

4. Video type

For the video type, I originally wanted to use video elements directly, but I am a pursuing Cheng Xuyuan, pursuing my own ideals. Is nothing just tossing? I started to use vue-video-palyer for video preview, but it didn't work out. After reporting errors in vue3, to put it bluntly, baby, I didn't support vue3? It's okay. I'm used to it. I recommend you to use one wave of vue-vam-video

npm install vue-vam-video -s

import 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:" Silence ",
                playTit:" Play ",
                pauseTit:" Suspend ",
                fullScreen:true,
                speed:true,
                listen:true
            }
        },
    })
}     

<vam-video
    :properties="videoOption.properties"
    :videoStyle="videoOption.videoStyle"
    :controlsConfig="videoOption.controlsConfig"
    @play="playVideo"
    @canplay="canplayVideo"
    @pause="pauseVideo"
></vam-video>

5. Audio type

After eating the above losses, I finally decided to use the label audio, and it was over to use it directly.

<audio :src="musicUrl" controls></audio>

To sum up, it is suggested that everyone should consider carefully. Big bosses like big factories have their own component libraries, so they don't worry at all, but we are still cautious in small factories. I hope vue has more component libraries and more perfect function libraries. After all, it is convenient to stand on the shoulders of giants. Nothing to study the source code. . . . . .

Summarize