Preface
It feels so good to cross the river by feeling the stones. I heard that the big bosses from major factories are busy using vue3 to upgrade projects, so I have nothing to do to join in the fun. I am still unwilling to make trouble in a small factory. A new project is done, and you can go directly to vue3. You are so excited. Some people may ignore the consequences, but the stumbling is basically done. Let's record it.
Let’s talk about a certain feature during the development process today! Anyway, it takes a lot of time. Let’s talk about the functional requirements first: you can click to preview the file list after uploading the file. The preview of file media types including pictures, word excel and other document files, PDF, video, and audio is for PC.
Preview of document types
The first thing I saw was the preview of document files such as word excel. At the beginning, I searched for some methods online. After all, I have little experience. Some people recommend downloading the preview of A tag directly, which is obviously not in line with our expectations. Some people recommend using sheetjs for excel, but we also need to find another method for word. In the end, I decided to use Microsoft's online preview and use iframe as a carrier for
<iframe frameborder="0" :src="'/op/?src=' + fileUrl" width='100%'> </iframe>
What needs to be considered is that in the dialog box of element-plus at that time, the iframe could not open the parent element well, so it filled in some code. And the loading process is relatively slow, and no other method attempts are considered due to time reasons.
Type preview
For the preview of this kind of pdf, I feel it's easy to solve. I used npm install pdfjs-dist, and I just started it. I never expected that I didn't support vue3 yet, so it's natural that I would report an error as soon as I ran up. Baidu was decisive. Baidu told me that this pdfjs-dist vue3 does not support it. Let's change the method, I ***, I want to find a solution to it,main characterAfter downloading, put the build and web folders in our public file. Make a reference and pay attention to whether your address is correct. I put it in an embed
= './pdf/web/?file='+type; // Online preview
<embed :src="pdfUrl" style="width: 100%; "/>
3. Picture type
I don't think we need to say much about this type, just upload 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 video types, I originally wanted to use the video element to put it directly in. But I am a programmer who pursues my ideals. Is it just a struggle? I started using vue-video-palyer to preview videos, but it just didn't go as expected. After the error was reported in vue3, I just want to put it bluntly. I'm here again. I don't support vue3? It's okay, I'm used to it, I recommend you to use a 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:"Mute",
playTit:"Play",
pauseTit:"pause",
fullScreen:true,
speed:true,
listen:true
}
},
})
}
<vam-video
:properties=""
:videoStyle=""
:controlsConfig=""
@play="playVideo"
@canplay="canplayVideo"
@pause="pauseVideo"
></vam-video>
5. Audio Type
After suffering the above losses, I finally decided to use the audio tag and just use it.
<audio :src="musicUrl" controls></audio>
In summary, it is recommended that everyone consider it carefully. For example, the big bosses of large factories have their own component library and are not worried at all, but we are still more cautious in small factories. I hope that more component libraries and function libraries of vue are more complete, after all, it is convenient to stand on the shoulders of giants. If you have nothing to do, study the source code more. . . . . .
Summarize
This is the article about previewing various types of files in vue3. For more information about previewing content of various types of files in vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!