图片、pdf、word、excel在线预览

安装

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

注：不支持doc格式

<template>
  <div>
    <img
      v-if="
        fileFormatType === 'jpg' ||
        fileFormatType === 'png' ||
        fileFormatType === 'JPG' ||
        fileFormatType === 'PNG'
      "
      :src="url"
      width="100%"
      height="100%"
    />
    <pdf v-else-if="fileFormatType === 'pdf'" ref="pdf" :src="url"> </pdf>
    <vue-office-docx  v-else-if="fileFormatType === 'docx'" :src="url" />
    <vue-office-excel  v-else-if="fileFormatType === 'xlsx'" :src="url" />
  </div>
</template>

<script>
import pdf from "vue-pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import "@vue-office/docx/lib/index.css";
export default {
  components: {
    pdf,
    VueOfficeDocx,
    VueOfficeExcel
  },
  props: {
    fileFormatType: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
  },
};
</script>

<style>
</style>