vue3 预览 word 文件 docx #安装 npm 依赖

安装npm依赖

npm i docx-preview@0.1.4
npm i jszip

预览本地文件

<template>
  <div class="my-component"
       ref="preview1">
    <input type="file"
           @change="preview"
           ref="file">
  </div>
</template>

<script lang='ts'>
import * as docx from 'docx-preview'
import * as JSZip from 'jszip'
import { defineComponent, onMounted, computed, reactive, ref } from 'vue'
export default defineComponent({
  setup() {
    onMounted(() => {
      window.JSZip = JSZip
    })
    const file = ref(null)
    const preview1 = ref(null)
    const preview = (e) => {
      docx.renderAsync(file.value.files[0], preview1.value) // 渲染到页面
    }
    return {
      file,
      preview1,
      preview,
    }
  },
})
</script>

<style  scoped>
.my-component {
  width: 100%;
  height: 90vh;
  border: 1px solid #000;
}
</style>