vue 前后端分离下载文件

1.概述

这篇文章介绍下vue开发下载文件功能

2.下载文件方式

下载文件有两种方式，一个是通过a标签下载文件。一个是通过调用下载接口下载文件。
两种方式下载文件区别：

• a标签通过链接下载文件，如果遇到图片浏览器可以解析，那么就不会下载而是直接在浏览器中打开。excel、word、zip等文件浏览器不能解析的则会下载文件。
• 调用后端接口下载文件，接口返回的是字节流，因此浏览器不能解析，所有文件格式都会下载。

2.1.a标签方式下载文件

在vue页面的methods方法对象中创建一个方法，编辑下载文件代码。

methods: {downloadFile(fileData) {// 获取下载文件内容let fileName = fileData.fileNamelet fileUrl = fileData.fileUrllet lastName = fileUrl.substring(fileUrl.lastIndexOf("."))// 创建a标签const link = document.createElement("a")link.download = lastName// 下载链接地址link.href = fileUrl// 新标签中下载link.target = "_blank"link.style.display = "none"// 将a标签添加到dom中document.body.appendChild(link)// 下载文件link.click()// 从dom中移除a标签document.body.removeChild(link)}
}

2.2.接口方式下载文件

在vue页面的methods方法对象中创建一个方法，编辑下载文件代码。

• 首先请求下载接口，获取返回的字节流。
• 通过a标签方式从接口返回的字节流下载文件。

methods: {downloadEvt(fileData) {// 1.请求下载接口，接口返回字节流request({url: "/api/file/download",method: "get",params: {fileId: id},// 设置响应格式为 multipart/form-dataresponseType: "blob",}).then((res) => {// 获取下载文件内容let fileName = fileData.fileNamelet fileUrl = fileData.fileUrllet lastName = fileUrl.substring(fileUrl.lastIndexOf("."))// 创建a标签const link = document.createElement("a")link.download = lastName// 2.使用接口返回的数据下载link.href = URL.createObjectURL(res)// 新标签中下载link.target = "_blank"link.style.display = "none"// 将a标签添加到dom中document.body.appendChild(link)// 下载文件link.click()// 从dom中移除a标签URL.removeObjectURL(link.href)document.body.removeChild(link)})}
}