前端开发之通过vue-office组件实现文件预览

前言

在实现文件预览的时候我们可以通过vue-office组件来实现文件的预览效果

效果图

docx文件

在这里插入图片描述

xlsx文件

在这里插入图片描述

pdf文件

在这里插入图片描述

vue中简单案例

1、安装组件

整体安装和分开安装:vue-demi可同时兼容vue3和vue2的组件库
npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi

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

vue的版本是2.6的 还需要安装
@vue/composition-api

2、vue中代码

<template>
  <div class="vueOffice-container">
    <el-upload class="upload-demo" action="" 
     :on-change="handleChange" 
     :file-list="fileList" 
     :limit="1" 
     multiple
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div class="el-upload__tip">
        <slot name='tip'>
          请上传文件
        </slot>
      </div>
    </el-upload>
    <div style="width: 40%; height: 840px">
      <vue-office-docx v-if="isdocx" :src="url" @rendered="rendered" style="width: 100%; height: 100%" />
      <vue-office-excel v-if="isexcel" :src="url" @rendered="rendered" style="width: 100%; height: 100%" />
      <vue-office-pdf v-if="ispdf" :src="url" @rendered="rendered" 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'

export default {
  name: 'vueOffice',
  components: { VueOfficeDocx, VueOfficeExcel, VueOfficePdf },
  data () {
    return {
      url: '',
      isdocx: false,
      isexcel: false,
      ispdf: false,
      fileList: [
      ]
    }
  },
  created () { },
  mounted () {
  methods: {
    rendered () {
      console.log('渲染完成')
    },
    previewFile (url) {
      // 根据文件格式显示预览内容
      const fileExtension = url.split('.').pop().toLowerCase()
      if (fileExtension === 'xlsx') {
        this.isexcel = true
        this.isdocx = false
        this.ispdf = false
      }
      if (fileExtension === 'docx') {
        this.isdocx = true
        this.isexcel = false
        this.ispdf = false
      }
      if (fileExtension === ('pdf' || 'PDF')) {
        this.isdocx = false
        this.isexcel = false
        this.ispdf = true
      }
    },
    handleChange (file, fileLists) {
      this.url = URL.createObjectURL(file.raw)
      this.previewFile(file.name)
    }

  }
}
</script>

<style lang="less" scoped>
.vueOffice-container {
}
</style>

  • 10
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于Vue项目中实现文件预览,你可以使用vue-office组件库。该组件库提供了丰富的功能,包括文件预览、编辑、保存等。 首先,你需要在你的Vue项目中安装vue-office组件库。可以通过npm安装: ``` npm install vue-office --save ``` 安装完成后,在你的Vue组件中引入并使用vue-office组件。例如,你可以创建一个名为PreviewFile.vue组件: ```vue <template> <div> <vue-office :fileUrl="fileUrl" :fileType="fileType" :options="options"></vue-office> </div> </template> <script> import 'vue-office/dist/style.css'; import VueOffice from 'vue-office'; export default { name: 'PreviewFile', components: { VueOffice }, data() { return { fileUrl: 'https://example.com/your-file-url', fileType: 'pdf', // 文件类型,支持pdf、word、excel、ppt options: {} // 可选配置项,如编辑模式、保存回调等 }; } }; </script> ``` 在上面的示例中,你需要设置`fileUrl`为你要预览文件的URL,`fileType`为文件类型(支持pdf、word、excel、ppt),`options`为可选配置项(例如编辑模式、保存回调等)。 请注意,这个示例假设你已经有一个文件服务器,并且可以通过URL访问到文件。如果你的文件是存储在本地或其他地方,请根据实际情况修改`fileUrl`。 最后,你可以在你的页面中使用PreviewFile组件实现文件预览: ```vue <template> <div> <PreviewFile></PreviewFile> </div> </template> <script> import PreviewFile from './PreviewFile.vue'; export default { name: 'App', components: { PreviewFile } }; </script> ``` 这样,你就可以在Vue项目中实现文件预览功能了。记得根据你的需求修改`fileUrl`和`fileType`,以及其他可选配置项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值