vue使用vue-office组件,在线预览

安装插件

npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi

//docx文档预览组件
npm install @vue-office/docx vue-demi
 
//excel文档预览组件
npm install @vue-office/excel vue-demi
 
//pdf文档预览组件
npm install @vue-office/pdf vue-demi

vue的版本是2.6的 还需要安装

@vue/composition-api 

个人使用安装了这个会报错,所以没事安装这个包也可以正常运行 

上代码

<template>
  <div class="app-container-temp">
    <div style="width: 100%; height: 840px; overflow: hidden">
      <vue-office-docx
        v-if="isdocx"
        :src="url"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
      <vue-office-excel
        v-if="isexcel"
        :src="url"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
      <vue-office-pdf
        v-if="ispdf"
        :src="url"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>
 
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";
 
import { getPathByIds } from "@/api/system/user";
 
export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
  },
  props: {
    // 文件uuid
    fileUuid: {
      type: String,
    },
  },
  data() {
    return {
      url: "",
      isdocx: false,
      isexcel: false,
      ispdf: false,
    };
  },
  mounted() {
    console.log("this.fileUuid00000 :>> ", this.fileUuid);
    var _this = this;
    this.url = "";
    if (this.fileUuid && this.fileUuid != "") {
      const list = [this.fileUuid];
      getPathByIds(list).then((res) => {
        if (res.data.length) {
          this.url = res.data[0].filePath;
          this.previewFile(this.url);
        }
      });
    }
  },
  methods: {
    rendered() {
      console.log("渲染完成");
    },
    previewFile(url) {
      // 根据文件格式显示预览内容
      const fileExtension = url.split(".").pop().toLowerCase();
      if (fileExtension === "xlsx") {
        this.isexcel = true;
      }
      if (fileExtension === "docx") {
        this.isdocx = true;
      }
      if (fileExtension === "pdf" || "PDF") {
        this.ispdf = true;
      }
    },
  },
};
</script>
 
<style scoped lang="scss"></style>

父组件弹窗

<el-dialog
      title="预览"
      append-to-body
      :visible.sync="oopen"
      modal-append-to-body
      :width="'1200px'"
    >
      <Preview :fileUuid="fileUuid" v-if="oopen"> </Preview>
    </el-dialog>