vue3 查看word pdf excel文件

也是在网上找的基础上修改的 可以直接使用

npm install @vue-office/docx
npm install @vue-office/excel
npm install @vue-office/pdf​

<template>
  <div
    class="Office-Preview"
    v-loading="loading"
    element-loading-text="文件加载中..."
  >
    <VueOfficeDocx
      v-if="fileType === 'docx'"
      :src="fileUrl"
      @rendered="rendered"
      @error="onError"
    ></VueOfficeDocx>
    <VueOfficeExcel
      v-if="fileType === 'excel'"
      :src="fileUrl"
      @rendered="rendered"
      @error="onError"
    ></VueOfficeExcel>
    <VueOfficePdf
      v-if="fileType === 'pdf'"
      :src="fileUrl"
      @rendered="rendered"
      @error="onError"
    ></VueOfficePdf>

    <el-empty
      v-if="fileType === 'errType'"
      image=""
      description="文件格式不规范"
      :image-size="300"
    ></el-empty>
    <el-empty
      v-if="fileType === 'loadErr'"
      image=""
      description="文件加载失败"
      :image-size="300"
    ></el-empty>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

// 引入 VueOffice 相关组件
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/excel/lib/index.css';
import VueOfficePdf from '@vue-office/pdf';

// 使用 useRoute 获取链接参数
const route = useRoute();
const fileUrl = ref(route.query.url || ''); // 从 URL 参数中获取 fileUrl

// 定义响应式数据
const fileType = ref('');
const loading = ref(true);

const init = () => {
  if (!fileUrl.value) {
    console.error('文件为空');
    loading.value = false;
    return;
  }

  const fileName = fileUrl.value.split('/').pop();
  const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);

  if (fileExtension === 'doc' || fileExtension === 'docx') {
    fileType.value = 'docx';
  } else if (fileExtension === 'xls' || fileExtension === 'xlsx') {
    fileType.value = 'excel';
  } else if (fileExtension === 'pdf') {
    fileType.value = 'pdf';
  } else if (fileExtension === 'ppt' || fileExtension === 'pptx') {
    fileType.value = 'ppt';
  } else {
    fileType.value = 'errType';
    loading.value = false;
  }
};

// 渲染和错误处理方法
const rendered = () => {
  console.log('渲染完成');
  loading.value = false;
};

const onError = () => {
  console.error('加载出错');
  loading.value = false;
  fileType.value = 'loadErr';
};

// 使用 Vue 3 的 onMounted 生命周期钩子
onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.Office-Preview {
  overflow-y: scroll;
  height: 100%;
}
</style>