vue-office预览docx，excel，pdf文件

官网：xlsx文件预览 | vue-office

一、安装

（1） 全部安装

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

（2）分开安装

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

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

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

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

二、使用

<template>
  <div class="content" style="margin: 20px">
 
    <div style="width: 100%; height: 85vh; overflow: hidden">
      <vue-office-docx
        v-if="isdocx"
        :src="url"
        @rendered="renderedFun"
        style="width: 100%; height: 100%"
      />
      <vue-office-excel
        v-if="isexcel"
        :src="url"
        :options="option"
        @rendered="renderedFun"
        @error="HandlError"
        style="width: 100%; height: 100%"
      />
      <vue-office-pdf
        v-if="ispdf"
        :src="url"
        @rendered="renderedFun"
        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 { onMounted, ref } from 'vue';
   
  export default {
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf,
       
    },
    setup() {
      const isLoad = ref(false);
      const url = ref('');
      const isdocx = ref(false);
      const isexcel = ref(false);
      const ispdf = ref(false);
      const renderedFun = () => {
        console.log('渲染完成');
      };
      const previewFile = (url) => {
        // 根据文件格式显示预览内容
        const fileExtension = url.split('.').pop().toLowerCase();
       
        if (fileExtension === 'xlsx' || fileExtension === 'xls') {
          isexcel.value = true;
        }
        if (fileExtension === 'docx') {
          isdocx.value = true;
        }
        if (fileExtension === 'pdf' || 'PDF') {
          ispdf.value = true;
        }
      };
      const HandlError = () => {
        console.log('该文件暂不支持在线预览');
      };
      const option = ref({
        xls: true, //预览xlsx文件设为false；预览xls文件设为true
      });
      onMounted(() => {
         
        url.value = 'src/views/previewDocu/12.xls';

        previewFile(url.value);
      });
      return {
        url,
        isdocx,
        isexcel,
        ispdf,
        isLoad,
        renderedFun,
        previewFile,
        HandlError,
        option,
      };
    },

    
  };
</script>

三、注意

vue-office不支持doc文件的预览。对xls文件进行预览时，必须设置options=｛xls:true｝