springboot+ vue怎么通过按钮打开word文件

1. 首先需要在后台编写一个接口，用于返回要下载的Word文件。
2. 在前端的Vue组件中，添加一个按钮，并在点击事件中发送一个axios请求，请求后台接口并下载文件。
3. 下载文件可以使用JavaScript的FileSaver插件或直接使用浏览器的下载功能。

后台接口示例（Java Spring Boot）：

@GetMapping("/downloadWord")
public ResponseEntity<Resource> downloadWord() throws IOException {
    // 读取Word文件，并转换成Resource对象
    Resource resource = new ByteArrayResource(Files.readAllBytes(Paths.get("path/to/word/file")));
    // 设置返回的HTTP头信息，包括文件名和Content-Type
    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=example.docx")
            .contentType(MediaType.parseMediaType("application/vnd.openxmlformats-officedocument.wordprocessingml.document"))
            .body(resource);
}

Vue组件示例：

<template>
  <div>
    <button @click="downloadWord">下载Word文件</button>
  </div>
</template>

<script>
import axios from 'axios';
import FileSaver from 'file-saver';

export default {
  methods: {
    downloadWord() {
      axios({
        method: 'get',
        url: '/downloadWord',
        responseType: 'blob'
      }).then(response => {
        // 使用FileSaver保存文件
        let blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
        FileSaver.saveAs(blob, 'example.docx');
      });
    }
  }
}
</script>