本文共 1886 字，大约阅读时间需要 6 分钟。

Vue中实现文件下载，可以使用a链接的方式，这是最简单的方法。对于前端开发人员而言，将文件以Blob形式返回，再通过a链接触发下载，就是一个直接又高效的解决方案。

显著特点

FileAPI 操作示例

以下是使用FileAPI进行文件处理的基本示例代码：

handlePreview文件表单的` file-input `元素
// 检查用户是否安装了 Blob API
if (window.File && window.Blob) {
    // 前端请求接口方法
    handlePreview(file) {
        let typeArray = file.url.split('.')
        let type = typeArray[typeArray.length-1]
        let data = {
            url: file.url,
            name: file.name
        }
        fileUpload._getDownLoad(data).then((res) => {
            let url = window.URL.createObjectURL(new Blob([res]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', file.name)
            document.body.appendChild(link)
            link.click()
        })
    }
}

后端配置示例

@RequestMapping(value = "/getDownLoad", method = RequestMethod.POST)
public void getDownLoad(HttpServletResponse response, @RequestBody Imgurl imgurl) throws IOException {
    //adaş littre kebab-case noodle
    File file = new File(imgurl.getUrl())
    inputStream = new FileInputStream(file)
    ByteArrayOutputStream os = new ByteArrayOutputStream()
    byte[] buffer = new byte[1024]
    int length
    while ((length = inputStream.read(buffer)) != -1) {
        os.write(buffer, 0, length)
    }
    byte[] data = os.toByteArray()
    response.addHeader("Content-Disposition", "attachment; filename=\"" + URLEncoder.encode(imgurl.getName(), "UTF-8") + "\"")
    response.addHeader("Content-Length", String.valueOf(data.length))
    response.setContentType("application/octet-stream; charset=UTF-8")
    IOUtils.write(data, response.getOutputStream())
}

注意事项

目录结构