Examples of preview functions for various types of files in vue3

Preface

It's not a pleasant feeling to cross the river by feeling the stones. I heard that the bosses of big companies are busy upgrading their projects with vue3, so I'd like to join in the fun. Working in a small factory, I am still unwilling to struggle. I'm working on a new project and I'm using vue3 directly. I'm so excited that some people may not care about the consequences, but I've basically finished it after stumbling around. Let's record it.

Let’s talk about a function in the development process today! Anyway, it takes a lot of time, so let's talk about the functional requirements first: After uploading a file, you can click to preview it in the file list, including file media types including pictures, word excel and other document files, pdf, video, audio preview for PC side

1. Preview of office document types

The first thing I saw was the preview of document files such as word and excel. I started to search for some methods on the Internet to solve this problem. After all, I have little experience. Some people recommended downloading the preview directly with the a tag, which obviously did not meet our expectations. Some people recommended using sheetjs for excel, but we also need to find another way for word. In the end, I decided to use Microsoft's online preview and use iframe as the 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 pop-up box of element-plus at that time, the iframe could not expand the parent element well, so some code was filled in. And the loading process is slow, so due to time constraints, I did not consider trying other methods.

2. Preview of pdf type

For this kind of PDF preview, it seems easy to solve. Use the npm install pdfjs-dist that I used before, and it's done. I never expected that my current version does not support vue3, so of course it will report an error when I run it. I decisively searched Baidu, and Baidu told me that this pdfjs-dist vue3 does not support it. Let's try another method. I'm ***, you said I want to find a solution, the protagonist is here. After downloading, put the build and web folders under our public files for 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

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

3. Image Type

I think we don't need to say much about this type, just go to the code and process the URL

<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 the video element directly, but I am an aspiring programmer who pursues my own ideals. I started to use vue-video-palyer for video preview, but it didn’t go as I wished. An error was reported in vue3. To put it bluntly, baby, it doesn’t support vue3? It's okay, I'm used to it. I recommend everyone to use 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: "speed",
                yinliangTit: "Volume",
                jingyinTit: "Silent",
                playTit: "Play",
                pauseTit: "Pause",
                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 suffering the above loss, I finally decided to use the audio tag and just use it directly.

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

In summary, I suggest that everyone consider it carefully. The bosses in large factories have their own component libraries and don’t worry at all, but we in small factories should be cautious. I hope that Vue’s component libraries and function libraries will be more complete. After all, it is convenient to stand on the shoulders of giants. It’s okay to study the source code. . . . . .

Summarize

This is the end of this article about the preview function of various types of files in vue3. For more relevant vue3 file preview content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!