vue 展示后端word 文档到页面

1、vue下载插件

   已管理员身份打开cmd   --> cd 命令跳转到vue项目根目录   -->执行以下下载插件命令

注意：如果下载失败多试几次，下载成功后package.json  文件 "dependencies"可以看到新增的插件，需要重启项目

npm i [email protected]
npm i jszip

2、前端代码

<template>
  <div class="app">
      <div ref="word"></div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancel"
        >关 闭</el-button
        >
      </span>
<!--    </el-dialog>-->
  </div>
</template>
<script>
import axios from "axios";
const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  data() {
    return {
      previewShow: false,
    };
  },
  props: {

  },
  created(){
    this.preview()
    this.previewShow = true
  },
  methods: {
    cancel() {
      this.previewShow = false
      this.$emit('closeDialog', 'cancel')
    },
    handleClose(done){
      this.$emit('closeDialog','cancel')
      done();
    },
    // 后端返回二进制流
    preview() {
      debugger
      axios({
        method: 'get',
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type":"application/json;charset=utf-8",
          Authorization: localStorage.getItem('token')   // 传递token
        },

        responseType: 'blob', // 设置响应文件格式
        url: '/tps-local-bd/web/mcstrans/apiDeliveryProtocol/getfilestream', //对应文件路径

      }).then(({data}) => {
        docx.renderAsync(data,this.$refs.word) // 渲染到页面预览
      })
    },
  },
};
</script>
<style scoped>
</style>

3、后端代码

    /**
     * @param response
     * @功能描述 下载文件:
     */
    @RequestMapping("/getfilestream")
    public void getfilestream(HttpServletRequest request, HttpServletResponse response
            , @CurrentUserContext UserContext userContext) {
        
        try {

            String filename = "配送服务协议模板.docx";

            // 将文件写入输入流
            // 项目resources 目录下
            InputStream fis = new ClassPathResource("static/配送协议-例.docx").getInputStream();

            // 清空response
            response.reset();
            // 设置response的Header
            response.setCharacterEncoding("UTF-8");
            //Content-Disposition的作用：告知浏览器以何种方式显示响应返回的文件，用浏览器打开还是以附件的形式下载到本地保存
            //attachment表示以附件方式下载 inline表示在线打开 "Content-Disposition: inline; filename=文件名.mp3"
            // filename表示文件的默认名称，因为网络传输只支持URL编码的相关支付，因此需要将文件名URL编码后进行传输,前端收到后需要反编码才能获取到真正的名称
            response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8"));
            response.setContentType("application/octet-stream");
            // 告知浏览器文件的大小
//            response.addHeader("Content-Length", "" + fis.length());
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());

            // 设置数据
            DeliveryAgreeTemplate data = DeliveryAgreeTemplate.builder().orgName(userContext.getOrgName()).build();
            EasyWord.of(fis).doWrite(data).toOutputStream(outputStream);

            outputStream.flush();
            fis.close();
        } catch (IOException ex) {
            ex.printStackTrace();
        } finally {


        }
    }

问题：word 显示到页面，可能存在样式不一致问题参看下文

前端实践（1）——加载显示word文档内容_前端展示word_Arcgiser的博客-CSDN博客