vue2 预览word文件

1. 使用vue-office

父组件调用init方法即,适用于远程url和本地文件

npm install @vue-office/docx vue-demi
<template>
  <el-dialog
    v-el-drag-dialog
    :visible.sync="previewOpen"
    :close-on-click-modal="false"
    append-to-body
    custom-class="previewDialog"
    @close="closeDialog"
  >
    <vue-office-docx :src="docx" @rendered="rendered" />
  </el-dialog>
</template>
<script>
  import VueOfficeDocx from '@vue-office/docx'
  import axios from 'axios'
  export default {
    components: {
      VueOfficeDocx
    },
    data() {
      return {
        previewOpen: false,
        docx: '' // 远程url地址,本次使用blob文件流转url
      }
    },
    beforeDestroy() {
      if (this.docx) {
        URL.revokeObjectURL(this.docx) // 清除Blob URL
      }
    },
    methods: {
      // 预览
      init(id) {
        axios({
          method: 'get',
          responseType: 'blob',
          url: '' // 自己的服务器,提供的一个word下载文件接口
        }).then((res) => {
          this.previewOpen = true
          this.$nextTick(() => {
            this.docx = window.URL.createObjectURL(res.data)
          })
        })
      },
      rendered() {
        console.log('渲染完成')
      },
      closeDialog() {
        this.previewOpen = false
      }
    }
  }
</script>
<style scoped>
  .previewDialog .el-dialog__headerbtn .el-dialog__close {
    z-index: 2001;
  }
  .word {
    display: block;
  }
</style>

2.使用docx-preview

父组件调用init方法即可,适用于本地文件

npm install docx-preview
<template>
  <el-dialog
    v-el-drag-dialog
    :visible.sync="previewOpen"
    :close-on-click-modal="false"
    append-to-body
    custom-class="previewDialog"
    @close="closeDialog"
  >
    <div class="word">
      <div ref="myfile" />
    </div>
  </el-dialog>
</template>
<script>
  const docx = require('docx-preview')
  import axios from 'axios'
  export default {
    data() {
      return {
        previewOpen: false
      }
    },
    methods: {
      init(id) {
        axios({
          method: 'get',
          responseType: 'blob',
          url: '' // 自己的服务器,提供的一个word下载文件接口
        }).then((res) => {
          this.previewOpen = true
          this.$nextTick(() => {
            docx.renderAsync(res.data, this.$refs.myfile)
          })
        })
      },
      closeDialog() {
        this.previewOpen = false
      }
    }
  }
</script>
<style scoped>
  .previewDialog .el-dialog__headerbtn .el-dialog__close {
    z-index: 2001;
  }
  .word {
    display: block;
  }
</style>

相关推荐

  1. vue2 word文件

    2024-04-02 09:42:05       6 阅读
  2. vue pdf、word、excel

    2024-04-02 09:42:05       28 阅读
  3. 浏览器word

    2024-04-02 09:42:05       11 阅读
  4. vue 文件(docx、.xlsx、pdf)

    2024-04-02 09:42:05       8 阅读

最近更新

  1. spdlog 日志库部分源码说明

    2024-04-02 09:42:05       0 阅读
  2. 软件测试 -- 自动化测试(Selenium)

    2024-04-02 09:42:05       0 阅读
  3. 2023-2024年人形机器人行业报告合集(精选397份)

    2024-04-02 09:42:05       0 阅读
  4. pcb的几种常见认证

    2024-04-02 09:42:05       0 阅读
  5. uniapp 页面跳转通信上下级页面互传

    2024-04-02 09:42:05       0 阅读
  6. 一文了解什么是RESTful风格

    2024-04-02 09:42:05       0 阅读
  7. SQL Server详细使用教程

    2024-04-02 09:42:05       0 阅读
  8. js实现快速拖拽(定时器版本)

    2024-04-02 09:42:05       0 阅读
  9. Flink CDC 整库 / 多表同步至 Kafka 方案(附源码)

    2024-04-02 09:42:05       0 阅读

热门阅读

  1. C++宝强越狱1.0.6版本

    2024-04-02 09:42:05       5 阅读
  2. python 批量向MQTT服务器推送数据

    2024-04-02 09:42:05       5 阅读
  3. FastAPI Web框架教程 第13章 WebSocket

    2024-04-02 09:42:05       4 阅读
  4. 设计模式-单例模式(懒汉式)

    2024-04-02 09:42:05       6 阅读
  5. Anaconda conda常用命令

    2024-04-02 09:42:05       9 阅读
  6. ES6+对象常用方法

    2024-04-02 09:42:05       4 阅读
  7. 快速安装sudachipy日语包

    2024-04-02 09:42:05       6 阅读
  8. 浅谈数据治理之道 数据资产(八)

    2024-04-02 09:42:05       6 阅读