Spring boot + Vue 文档下载

最新推荐文章于 2023-04-11 22:40:40 发布

java_augur

最新推荐文章于 2023-04-11 22:40:40 发布

阅读量157

点赞数

分类专栏： Java Spring Vue

本文链接：https://blog.youkuaiyun.com/java_augur/article/details/114693255

版权

Java 同时被 3 个专栏收录

24 篇文章

订阅专栏

Spring

23 篇文章

订阅专栏

Vue

17 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的前端文件下载功能，通过Ajax发起POST请求到后端接口，后端通过流的方式将文件返回给前端进行下载。前端通过创建隐藏的a标签并触发点击事件实现自动下载，后端采用Java实现。

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

前端Vue代码：

downloadDocument (row) {
      let vm = this
      this.$ajax.post('/api/downloadDocument', row, {responseType: 'blob'})
        .then(function (res) {
          if (!res.data) {
            return
          }
          let url = window.URL.createObjectURL(new Blob([res.data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', row.fileName)

          document.body.appendChild(link)
          link.click()
        }
        ).catch(function (error) {
          let reader = new FileReader()
          reader.onload = function () {
            let jsonData = JSON.parse(this.result)
            vm.$message(jsonData.message)
          }
          reader.readAsText(error.response.data)
        })
    },

后端代码：

controller:

	@RequestMapping(value = "/downloadDocument", method = RequestMethod.POST)
	public void downloadDocument(@RequestBody DocumentDto documentDto, HttpServletResponse response)
			throws IOException {
		documentService.downloadDocument(documentDto, response.getOutputStream());
		response.flushBuffer();
	}

service:

	@Override
	public void downloadDocument(DocumentDto documentDto,  OutputStream os)  throws IOException {
		String fileName = documentDto.getFileName();
		Path documentPath = Paths.get(this.fileStorageLocation, documentDto.getFileFolderName()).toAbsolutePath()
				.normalize().resolve(fileName);
		org.apache.commons.io.FileUtils.copyFile(documentPath.toFile(), os);
	}

Good Luck,

Cheers!