It’s not a good feeling to cross the river by feeling the stones. I heard that the big bosses of the big factory are busy upgrading the project with VUE3, and I have no trouble to make a stir. In a small factory or unwilling to toss. For a new project, I went directly to VUE3. I was so hot-headed that some people might be reckless, but I stumbled and almost finished it. Let me record it

Let’s talk about a feature in the development process today. In the file list after uploading the file, you can click to preview the file, including the media type of the file, including pictures, Word, Excel and other documents, PDF, video and audio preview for PC

1. Preview office document types

The first thing I saw was the preview of word, Excel and other documents. I searched some methods on the Internet to solve the problem. After all, I have little experience in this field. I finally decided to use Microsoft’s online preview, using iframe as the carrier

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

The thing to consider is that in my elemental-Plus dialog, the iframe didn’t support the parent element very well, so I had to fill in some code. And the loading process is relatively slow, due to time reasons, no other method is considered to try

2. PDF preview

NPM install PDfJS-dist was used before, and it was done. I didn’t expect that I didn’t support VUE3 yet, so I should have reported an error at the first run. Baidu told me, This pdFJs-Dist vue3 is not supported, let’s change the way, I ***, as you said I want to find a solution, the main role after downloading, put the build and Web folder in our public file for reference, pay attention to your address is correct, I put an embed

  data.pdfUrl = './pdf/web/viewer.html? file='+type;  // Online preview
Copy the code
 <embed  :src="pdfUrl" style="width: 100%; "/>
Copy the code

3. Picture type

I think this type, we don’t even have to talk about it, just go to the code and deal with the URL

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

4. Video type

For the video type, I wanted to directly use the video element to put in the video, but I am a program ape with pursuit, pursuing my ideal, nothing is a bother, I started to use vue-video-palyer for video preview, but it was not my wish, I got an error in vue3, to put it bluntly, baby, Vue3 is not supported? It’s ok. I’m used to it. I recommend vue-vam-video

npm install vue-vam-video -s
Copy the code
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:"Times".yinliangTit:"Volume".jingyinTit:"Mute".playTit:"Play".pauseTit:"Pause".fullScreen:true.speed:true.listen:true}}})}Copy the code
<vam-video
    :properties="videoOption.properties"
    :videoStyle="videoOption.videoStyle"
    :controlsConfig="videoOption.controlsConfig"
    @play="playVideo"
    @canplay="canplayVideo"
    @pause="pauseVideo"
></vam-video>
Copy the code
5. Audio type

Finally, I decided to use audio tag.

<audio :src="musicUrl" controls></audio>
Copy the code

To sum up, it is suggested that we consider carefully. For example, the big bosses of big factories have their own component libraries and are not worried at all, but we of small factories are still cautious. Hope vue more component library, function library more perfect, after all, standing on the shoulders of giants is convenient. No more research source……