Vue vue-office+element-ui 预览docx、xlsx、pdf文件

在Vue中，我们可以使用一些第三方的插件或者组件来实现文件预览功能。比如，我们可以使用vue-office插件来预览PDF文件，文中所给的例子中使用了vue-office+element-ui。

1.安装element-ui

element-ui 快速开始可参考官网文档Element - 网站快速成型工具

2.安装vue-office

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

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

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

3.代码

index.vue代码

<template>
  <div>
     <el-button @click="FilePreviewDialogHandle('docx')">测试doc文件预览</el-button>
    <el-button @click="FilePreviewDialogHandle('pdf')">测试pdf文件预览</el-button>
    <el-button @click="FilePreviewDialogHandle('xlxs')">测试xlsx文件预览</el-button>
    <FilePreviewDialog :file-url="fileUrl" :dialog-visible="this.openFilePreview" @closePreviewDialog="this.FilePreviewDialogHandle"></FilePreviewDialog>
  </div>
</template>

<script>
import FilePreviewDialog from '@/components/FilePreviewDialog.vue'
import { ref } from 'vue'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Index',
  components: { FilePreviewDialog },
  data () {
    return {
      openFilePreview: false,
      fileUrl: null // 预览本地文件，文件放置与public文件夹下
    }
  },
  methods: {
    // 控制文件预览Dialog显示
    FilePreviewDialogHandle (type) {
      console.log(type)
      this.openFilePreview = !this.openFilePreview
      if (type === 'docx') {
        this.fileUrl = ref('../file/test.docx') // 本地预览
      } else if (type === 'pdf') {
        this.fileUrl = 'http://static.shanhuxueyuan.com/test.pdf' // 线上获取
      } else if (type === 'xlxs') {
        this.fileUrl = 'http://static.shanhuxueyuan.com/demo/excel.xlsx'
      } else if (type == null) {
        this.fileUrl = null
      } else {
        this.fileUrl = null
      }
    }
  }
}
</script>

FilePreviewDialog.vue代码

<template>
  <el-dialog title="预览" :visible.sync="$props.dialogVisible" :before-close="handleClose" :modal="false" :close-on-click-modal="false">
    <div v-if="getFileType(fileUrl) == 'docx'">
      <vue-office-docx
        :src="fileUrl"
        style="height: 100vh;overflow: auto"
        @rendered="rendered"
        @error="errorHandler"
      />
    </div>
    <div v-if="getFileType(fileUrl) == 'xlsx'">
      <vue-office-excel
        :src="fileUrl"
        style="height: 100vh;overflow: auto"
        @rendered="rendered"
        @error="errorHandler"
      />
    </div>
    <div v-if="getFileType(fileUrl) == 'pdf'">
      <vue-office-pdf
        :src="fileUrl"
        style="height: 100vh;overflow: auto"
        @rendered="rendered"
        @error="errorHandler"
        :options="{
            width: '100%',
            overflow: 'auto'
          }"
      />
    </div>
  </el-dialog>
</template>

<script>

// 引入VueOffice组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
export default {
  name: 'FilePreviewDialog',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  props: {
    fileUrl: String, // 文件url
    dialogVisible: { // 控制显示
      type: Boolean,
      default: false
    }
  },
  methods: {

    // 获取文件类型
    getFileType (fileUrl) {
      if (fileUrl !== '' && fileUrl != null && fileUrl !== undefined) {
        const fileType = fileUrl.split('.').pop().toLowerCase() // 文件的扩展名（格式）
        console.log('type:', fileType)
        return fileType
      } else {
        return 'docx'
      }
    },

    // 渲染结果
    rendered () {
      console.log('渲染完成')
    },

    errorHandler () {
      this.$notify.error('加载失败')
    },

    // 关闭
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('closePreviewDialog', false)
        })
        .catch(_ => {})
    }

  }

}
</script>

注意事项

• 目前vue-office不支持doc格式。
• 需要确保数据格式正确，否则可能会出现转换错误的情况。