前端实现文件预览

1. 文件预览按钮

<el-button type="primary" icon="el-icon-circle-plus" :size="buttonSize" @click="preview()">文件预览</el-button>

2. 路由跳转

//文件预览
    preview() {
      this.$router.push({
        path: "/preview",
        query: {},
      });
    },

3. 文件预览前需配置(实现文件预览所需文件在我的CSDN上传的资源中查找)

安装部署
		1: 安装微软Office 2010或以上版本
		2: 安装JDK 1.6或以上版本
		3: 将release/jacob下的适合的dll文件复制到JDK的bin目录下。 32位操作系统选：jacob-1.18-x86.dll，64位选：jacob-1.18-x64.dll。
		4: 安装Tomcat 6或以上版本
		5: 将release/war/xoffice.war复制到tomcat的webapps目录下，重启服务

4. 实现文件预览

<template>
  <!-- 
	 使用xdoc实现文件预览
	 地址: https://gitee.com/xdoc/xoffice
	 
	 安装部署
		 安装微软Office 2010或以上版本
		 安装JDK 1.6或以上版本
		 将release/jacob下的适合的dll文件复制到JDK的bin目录下。 32位操作系统选：jacob-1.18-x86.dll，64位选：jacob-1.18-x64.dll。
		 安装Tomcat 6或以上版本
		 将release/war/xoffice.war复制到tomcat的webapps目录下，重启服务
	 
	 
	 -->
  <!-- <div style="height: 660px;"> -->

  <!-- 第一种方式: 不支持手机端 -->
  <!-- <iframe id="preview" :src="src" height="100%" width="100%" frameborder="0" scrolling="yes" marginheight="10"
		 marginwidth="10"></iframe> -->
  <!-- <pdf :src="src"></pdf> -->

  <!-- </div> -->

	<!-- 第二种方式 使用vue-pdf,手机端和pc端都支持 -->
  <div>
    <pdf ref="pdf" :src="src" v-for="i in numPages" :key="i" :page="i"></pdf>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import request from "@/utils/request";
import qs from "qs";

export default {
  components: {
    pdf,
  },
  data: function () {
    return {
      src:
        "http://localhost:8088/xoffice/xoffice?_xformat=doc&_file=http://localhost:8080/docs/fuwu.docx",
      numPages: 1, // pdf 总页数
    };
  },
  methods: {
    // # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(
        this.src
      );
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("文件加载失败", err);
        });
    },
  },
  mounted() {
	  this.getNumPages();
  },
};
</script>

<style>
</style>