vue 预览 word 文件 docx

最新推荐文章于 2025-10-23 01:16:05 发布

转载最新推荐文章于 2025-10-23 01:16:05 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/vue%E9%A2%84%E8%A7%88word%E6%96%87%E4%BB%B6docx.html

文章标签：

#vue.js #word #前端

本文介绍了如何在Vue项目中通过npm安装并使用docx-preview和JSZip库，实现在线从服务器获取docx文件的预览以及本地文件选择后的预览功能。

一、安装 npm 依赖

npm i docx-preview@0.1.4
npm i jszip

预览在线地址

<template>
  <div class="home">
    <div ref="file"></div>
  </div>
</template>

<script>
import axios from 'axios'
const docx = require('docx-preview');

// 如果 docx-preview 版本比较新需要 es6 导出
// import { renderAsync } from 'docx-preview'

window.JSZip = require('jszip')
export default {
  mounted(){
    axios({
      method: 'get',
      responseType: 'blob', // 设置响应文件格式
      url: '/docx',
    }).then(({data}) => {
      docx.renderAsync(data,this.$refs.file) // 渲染到页面预览
    })
  }
}
</script>

预览本地地址

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

<script>
const docx = require('docx-preview');
window.JSZip = require('jszip')
export default {
  methods:{
    preview(e){
      docx.renderAsync(this.$refs.file.files[0],this.$refs.preview) // 渲染到页面预览
    }
  }
};
</script>