Java+Vue通过文件流实现PDF和视频的在线播放和下载功能

原创

已于 2024-04-12 13:14:25 修改 · 703 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js #pdf

于 2024-04-10 09:36:29 首次发布

文章介绍了如何在Vue项目中通过后端返回文件流，使用`previewFile`方法实现在线预览PDF和MP4文件，并处理视频播放和下载功能的详细代码实现。

在线预览pdf或者播放视频的页面Vue代码

主要通过后端返回文件流，前端进行处理展示。后端返回流的代码省略，只展示前端代码，其他vue引入这个preview-file文件，调用previewFile这个方法即可，this.$refs.previewFileRef.previewFile(row)

<template>
  <div class="preview-file">
    <el-dialog
      width="80%"
      :top="'10px'"
      class="viewItemFileDialog"
      :fullscreen="whetherFullScreen"
      :visible.sync="dialogVisible"
      @close="closeDialog"
    >
      <span slot="title" style="font-size: 18px">
        <span>预览</span>
        <i style="position: absolute; right:50px; top: 15px"
          class="el-icon-full-screen"
          @click="fullscreenClick"
        ></i>
      </span>
      <div v-if="type == 'pdf'" v-loading="loading">
        <iframe
          :src="pdfUrl"
          type="application/x-google-chrome-pdf"
          width="100%"
          height="100%"
          style="height: 800px"
        />
      </div>
      <div v-if="type == 'mp4'" v-loading="loading">
        <video width="100%" height="100%" controls>
          <source :src="videoUrl" type="video/mp4" />