smartsearch/vue/src/components/basic/file-preview/index.vue

<template>
  <a-spin tip="" size="small" :spinning="spinning">
    <a-button type="link" size="small" @click="loadFile">预览</a-button>
  </a-spin>
  <a-modal :visible="visible" :ok-button-props="{ style: { display: 'none' } }"
           wrap-class-name="full-modal" style="text-align: center"
           cancel-text="关闭" @cancel="visible = !visible">
    <input type="file" @change="changeHandle"/>
    <a-spin tip="加载中..." size="small" :spinning="spinning">
      <vue-office-excel v-if="fileSuffix=='xlsx'" :src="previewUrl" style="height: 90vh;"
                        @rendered="rendered" @error="renderedError"/>
      <vue-office-pdf v-else-if="fileSuffix=='xls'" :src="previewUrl" class="docx-calss" @rendered="rendered"
                      @error="renderedError" style="height: 90vh;"/>
      <vue-office-docx v-else-if="fileSuffix=='docx'||fileSuffix=='doc'" :src="previewUrl" @rendered="rendered"
                       @error="renderedError"
                       style="width: 100%; height: 90vh;"/>
      <vue-office-pdf v-else :src="previewUrl" class="docx-calss" @rendered="rendered"
                      @error="renderedError" style="height: 90vh;"/>
    </a-spin>
  </a-modal>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import {message as $message} from "ant-design-vue/lib/components";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import {handleloadByGet} from "@/utils/downloadFile";

export default defineComponent({
  name: 'b-file-preview',
  components: {
    VueOfficeDocx, VueOfficePdf, VueOfficeExcel
  },
  props: {
    fileName: {type: String, default: ""},
    filePath: {type: String, default: ""},
    accept: {
      type: String,
      default: '.docx,.doc,.xlsx,.xls,.pdf',
    },
  },
  setup(props) {
    const visible = ref<boolean>(false);
    const spinning = ref<boolean>(false);
    const previewUrl = ref<any>();
    const fileSuffix = ref("");

    function loadFile() {
      let fileName = stripHtmlTags(props.fileName);
      let filePath = stripHtmlTags(props.filePath);
      fileSuffix.value = fileName?.substring(fileName?.lastIndexOf('.') + 1).toLowerCase();

      if (props.accept?.indexOf(fileSuffix.value) < 0) {
        $message.error("不支持预览的文件格式！");
        return;
      }
      spinning.value = true;
      handleloadByGet("/api/wellInfo/downFile", {
        isShow: 1,
        fileName: fileName,
        filePath: filePath
      }, "获取文件失败！").then(res => {
        debugger
        previewUrl.value = new Blob([res.data], {type: "application/octet-stream"});
        // previewUrl.value = res.data;
        if (previewUrl.value == undefined) {
          $message.error("文件加载失败！");
          return;
        }
        visible.value = true;
      })
    }
   function  changeHandle(event) {
      let file = event.target.files[0]
      let fileReader = new FileReader()
      fileReader.readAsArrayBuffer(file)
      fileReader.onload = () => {
        previewUrl.value = fileReader.result;
      }
    }
    function stripHtmlTags(htmlString: string): string {
      return htmlString.replace(/<[^>]+>/g, '');
    }

    function rendered() {
      console.log("渲染完成");
      spinning.value = false;
    }

    function renderedError(ex) {
      console.log("渲染出错", ex);
      spinning.value = false;
    }

    return {
      visible, fileSuffix,
      previewUrl,
      loadFile,
      rendered, renderedError,changeHandle,
      spinning,
    };
  }
})
</script>
<style lang="less">

</style>