vue前端预览word，java后端返回数据流

vue前端预览word，后端返回数据流

vue下载插件

npm i docx-preview@0.1.4
npm i jszip

前端代码

  <template>
  <div class="app">
<!--    <el-button @click="preview">预览</el-button>-->
    <el-dialog
      v-if="previewShow"
      title="预览"
      :visible.sync="previewShow"
      :before-close="handleClose"
      append-to-body
      width="90%"
    >
      <!-- word 显示-->
      <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";
import {getWordFile} from "@/api/repeat";
import { getToken } from '@/utils/auth'
const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  data() {
    return {
      previewShow: false,
    };
  },
  props: {
    wordItemCode:{
      type:String,
      default: () => ''
    },
    wordSubjectCode:{
      type:String,
      default: () => ''
    }
  },
  created(){
    this.preview()
    this.previewShow = true
  },
  methods: {
    cancel() {
      this.previewShow = false
      this.$emit('closeDialog', 'cancel')
    },
    handleClose(done){
      this.$emit('closeDialog','cancel')
      done();
    },
    // 后端返回二进制流
    preview() {
      axios({
        method: 'get',
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type":"application/json;charset=utf-8",
          "Authorization": "Bearer " + getToken(), //后台验证token
        },
        //params
        params: {wordItemCode:this.wordItemCode,wordSubjectCode: this.wordSubjectCode},
        responseType: 'blob', // 设置响应文件格式
        url: 'dev-api/service/api/getfilestream', //对应文件路径
      }).then(({data}) => {
        docx.renderAsync(data,this.$refs.word) // 渲染到页面预览
      })
    },
  },
};
</script>
<style scoped>
</style>

java后端代码

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

        try {
            // 找到所要下载的文件
            String wordLabelsCode = request.getParameter("wordItemCode");
            String wordSubjectCode = request.getParameter("wordSubjectCode");
            String reportfile = repeatService.getExistFile(wordLabelsCode, wordSubjectCode); //文件本地路径
            if(reportfile == null){
                throw new BadRequestException(HttpStatus.INTERNAL_SERVER_ERROR ,"您的报告暂未生成,请耐心等待");
            }
            File file = new File(reportfile);
            if(!file.exists()){
                System.out.println(file.getPath());
                throw new BadRequestException("您的报告暂未生成,请耐心等待");
            }
            // 获取文件名
            String filename = file.getName();
            // 获取文件后缀名
            String ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
            //System.out.println("文件后缀名：" + ext);
            // 将文件写入输入流
            FileInputStream fileInputStream = new FileInputStream(file);
            InputStream fis = new BufferedInputStream(fileInputStream);
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();

            // 清空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.addHeader("Content-Length", "" + file.length());
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");
            outputStream.write(buffer);
            outputStream.flush();
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

前端展示