Java实现vue在线预览word显示空白 vue 预览word

1.Vue2.0

（1）预览word

首先需要安装mammoth.1.5.1，预览原理其实就是使用xhr下载word文件，然后使用mammoth将字符流转换为html用于预览

npm install --save mammoth

本地使用mammoth预览成功，不过对比在Word中打开的结果可以看出预览效果有限，而且只能预览docx文件，不能预览doc文件，可见下图：

使用mammoth预览

直接在Word打开

（2）预览pdf

使用vue-pdf可以进行pdf预览，首先在终端进行安装

npm install --save vue-pdf

这里最好使用低版本的Node.js，我这里使用的是16.14.0版本，高版本Node安装或者运行时可能会报错

<template>
  <div>
    <!-- <pdf :src="'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'"></pdf> -->
    <el-card style="width:700px;height: 520px;overflow:auto;margin-bottom: 0px;">
      <pdf  v-for="i in numPages" :key="i" :src="url" :page="i" ></pdf>	
    </el-card>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  props:['url'],
  data() {
    return {
      numPages: 1,
    }
  },
  created() {
    this.getNumPages(this.url)
  },
  methods: {
    getNumPages(url) {
      let loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise.then(pdf => {
        this.url = loadingTask
        this.numPages = pdf.numPages
      }).catch((err) => {
        console.error('pdf加载失败')
      })
    },
    
  }
}
</script>

pdf预览效果：

（3）预览视频

在Vue2中使用阿里云播放器即可播放视频

npm install vue-aliplayer-v2 --save

<template>
  <div class="video-ali">
    <!-- 使用阿里云视频播放器，支持mp4,wmv等多种格式 -->
    <vue-aliplayer-v2 :source="videoUrl" ref="VueAliplayerV2" :options="options" />
  </div>
</template>

<script>
export default {
  props: ['videoUrl'],
  data() {
    return {
      options: {
        // source:'http://player.alicdn.com/video/aliyunmedia.mp4',
        isLive: false, //切换为直播流的时候必填
        // format: 'm3u8'  //切换为直播流的时候必填
      },
      source: "...视频的url",
      // source: 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8',
    };
  },

  methods: {
    play() {
      this.$refs.VueAliplayerV2.play();
    },

    pause() {
      this.$refs.VueAliplayerV2.pause();
    },

    replay() {
      this.$refs.VueAliplayerV2.replay();
    },

    getStatus() {
      const status = this.$refs.VueAliplayerV2.getStatus();
      console.log(`getStatus:`, status);
      alert(`getStatus:${status}`);
    },

    showMultiple() {
      this.isShowMultiple = !this.isShowMultiple;
    },
  },
}
</script>

<style scope>
.video-ali {
  height: 400px;
  width: 540px;
}
</style>

预览效果：

2.Vue3.0

Vue3.0直接预览word现在还没找到合适的解决方案，这里介绍Vue3预览pdf和视频的实现方法

（1）预览pdf

vue-pdf在Vue3中使用会报错，这里使用pdfh5实现pdf的预览

npm install pdfh5 --save

<template>
  <div>
    <div id="demo"></div>
  </div>
</template>
<script>
import Pdfh5 from "pdfh5";
export default {
  name: 'App',
  props: ['pdfUrl'],
  data() {
    return {
      pdfh5: null
    };
  },
  mounted() {
    //实例化
    this.pdfh5 = new Pdfh5("#demo", {
      pdfurl: this.pdfUrl
    });
    console.log(this.pdfUrl);
    //监听完成事件
    this.pdfh5.on("complete", function (status, msg, time) {
      console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
    })
  }
}
</script>

<style>
@import "pdfh5/css/pdfh5.css";

* {
  padding: 0;
  margin: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

#demo{
  height: 600px;
}
</style>

（2）预览视频

使用vue3VideoPlay可实现视频预览

npm install vue3VideoPlay --save

<template>
  <div>
    <vue3VideoPlay v-bind="options" :poster="poster" />
  </div>
</template>
  
<script>

import "vue3-video-play/dist/style.css";
import vue3VideoPlay from "vue3-video-play";
import { reactive, toRefs } from "vue";


export default {
  components: {
    vue3VideoPlay,
  },
  props: ['video_url', 'poster'],
  setup(props) {
    let data = reactive({
      options: {
        width: "800px", //播放器高度
        height: "450px", //播放器高度
        color: "#409eff", //主题色
        title: "", //视频名称
        src: props.video_url, //视频源
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: true, //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制
        controlBtns: [
          "audioTrack",
          "quality",
          "speedRate",
          "volume",
          "setting",
          "pip",
          "pageFullScreen",
          "fullScreen",
        ], //显示所有按钮,
      },
      poster: props.poster
    });

    return {
      ...toRefs(data)
    }
  }
};
</script>

预览效果：

3.预览ppt（KKFileView）

在这几种文件中，预览ppt我在vue2和vue3都没找到合适的方法，很多文章都说要使用公网，使用iframe搭配微软的接口进行预览

微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

但问题是我没有公网域名，微软的接口是没法解析局域网中的文件地址的，又找了很久也没找到太好的解决方法

最后是直接氪金购买了KKFileView服务，官网在这：kkFileView - 在线文件预览 (keking.cn)

KKFileView能够提供接口服务，默认占用8012端口，本地启动KKFileView后可使用iframe进行预览（官方文档很详细，B站也有视频）

<iframe sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups" 
    :src="'http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url))" frameborder="0">
</iframe>