利用vue 及java io流实现浏览器预览docx功能

最新推荐文章于 2024-07-12 09:58:00 发布

普通小程序员

最新推荐文章于 2024-07-12 09:58:00 发布

阅读量1.6k

点赞数 2

分类专栏： Vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_41611829/article/details/125531096

版权

Vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.后端接口

 @GetMapping(value = "/download")
    public void download(HttpServletResponse res, HttpServletResponse response) throws Exception {
        String fileName = "科协页面详细说明.docx";
        String path = "C://Users/hanku/Desktop/"+fileName;
        // 把二进制流放入到响应体中
        File file = new File(path);
        if (file.exists()) {
            byte[] data = null;
            FileInputStream input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            // 根据文件类型，设置文件Content-Type
            String fileType = fileName.substring(fileName.lastIndexOf(".")).toUpperCase();
            // 设置Content-Type头
            switch (fileType) {
                case ".JPG":
                    response.setContentType("image/jpeg");
                    break;
                case ".JPEG":
                    response.setContentType("image/jpeg");
                    break;
                case ".PNG":
                    response.setContentType("image/png");
                    break;
                case ".PDF":
                    response.setContentType("application/pdf");
                    break;
                case ".DOC":
                    response.setContentType("application/msword");
                    break;
                case ".DOCX":
                case ".docx":
                    response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document");
                    break;
                default:
                    response.setContentType("application/json");
            }
            response.getOutputStream().write(data);
            input.close();
        }
    }

2.vue前端

vue项目要先下载插件哦

npm i docx-preview@0.1.4

npm i jszip

这里面有两种预览效果，一种是一层层找相应的docx文件，另一种是指定目录和文件名打开

参考资料：https://zhuanlan.zhihu.com/p/437059185

<template>
  <div class="my-component" ref="preview">
    <!--  //https://blog.csdn.net/weixin_52103939/article/details/122447620 -->
    <input type="file" @change="preview" ref="file" />
    <button @click="goPreview">di</button>
    <div ref="preview"></div>
  </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); // 渲染到页面预览
    },
    // 预览
    goPreview() {
      //参考资料：https://zhuanlan.zhihu.com/p/437059185
      //   axios({
      //     method: "get",
      //     responseType: "blob", // 因为是流文件，所以要指定blob类型或者arraybuffer
      //     url: "localhost:13000/download", // 自己的服务器，提供的一个word下载文件接口
      //   }).then(({ data }) => {
      //     debugger
      //     console.log(data); // 后端返回的是流文件
      //     docx.renderAsync(data, this.$refs.file); // 渲染到页面
      //   });

      this.$http({ method: "get", url: "/download", responseType: "blob" })
        .then((response) => {
          console.log(response);
          docx.renderAsync(response.data, this.$refs.preview); // 渲染到页面（着重注意            
           this.$refs.preview要和<div ref="preview"></div>保持一致）
        })
        .catch(function (error) {});
    },
  },
};
</script>
<style lang="less" scoped>
.my-component {
  width: 100%;
  height: 90vh;
  border: 1px solid #000;
}
</style>