vue实现预览word文档（处理文档流）

码田里的小白菜

已于 2022-09-27 22:59:59 修改

阅读量2.1w

点赞数 7

文章标签： javascript 前端 npm

于 2022-09-22 18:42:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45294459/article/details/126997364

版权

本文介绍如何利用docx-preview插件在Vue项目中实现Word文档的在线预览功能。主要包括安装插件、引入并使用该插件进行文档流处理，最终将Word文档渲染到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

1、需要用到插件

npm i docx-preview --save

页面实现预览主要依靠插件，所以这是最重要的一步，如果你用的cnpm包管理器，那就是命令行

cnpm i docx-preview --save

2、引入var docxx = require("docx-preview");

3、调取接口，获得后端传回的文档流，这里的res.data.data就是文档流，并调用docx-previre的方法渲染文件到页面。

4、结束，代码如下：

<template>
  <div>
    <el-button @click="createpsbgDoc">报告</el-button>
    <div ref="word" class="docWrap"></div>
  </div>
</template>
<script>
import {
  createpsbgDoc,
} from "_b/api/results.js";
var docxx = require("docx-preview");
export default {
methods:{
    createpsbgDoc() {
      createpsbgDoc()//调接口
        .then((res) => {
          docxx.renderAsync(res.data.data, this.$refs.word);
        })
        .catch((error) => {
          this.$message({
            type: "error",
            message: error,
          });
        });
    },
}
}
</script>

"_b/api/results.js"内容如下，就是调的接口，axios

import request from '@/router/axios';
  
  export const createpsbgDoc = (projectId) => {
    return request({
      url:'/abc/ccccc/aaaaaaa',  //后端接口
      method: 'get',
      params: {
        projectId   //请求参数
      },
    })
  }

5、通过文档流在vue页面实现下载文档，还在实践中