多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
课件代码:https://gitee.com/flymini/codes01/tree/master/example_/com-learn-webdownload **** 实现文件下载可以采用下面提供的方案。 <br/> **1. 采用a标签** * 该方法不能下载图片、视频、音频文件。 ```html <!-- download属性无用,下载的文件名为链接的最后一部分,这里就是docker-ce.repo --> <a href="https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo" download="下载文件名">下载文件</a> ``` <br/> **2. js生成a标签** * 该方法不能下载图片、视频、音频文件。 ```js function download() { const a = document.createElement("a"); a.setAttribute("href", "https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo"); //download属性无用,下载的文件名为链接的最后一部分,这里就是docker-ce.repo a.setAttribute("download", "下载文件名"); a.click(); } ``` <br/> **3. ajax请求** * 可以下载任意类型的文件。 1. 前端代码。 ```html <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> function download02() { axios({ method: 'post', url: 'http://localhost:8080/download02', params: {'path': 'e:/upload/Numpy.mp4'}, responseType: 'blob' //响应类型为blob }).then(response => { //获取文件名 const filename = window.decodeURI(response.headers['content-disposition']).replace('attachment;filename=', '') //根据二进制对象创造新的链接 const href = URL.createObjectURL(response.data); const a = document.createElement('a'); a.setAttribute('href', href); a.setAttribute('download', filename); a.click(); URL.revokeObjectURL(href); }) } </script> ``` 2. java代码。 ```java @RestController public class DownloadController { @RequestMapping("/download02") public void download(@RequestParam("path") String path, HttpServletResponse response) throws IOException { OutputStream out = response.getOutputStream(); FileInputStream fis = new FileInputStream(path); byte[] content = new byte[1024]; String fileName = URLEncoder.encode("下载文件名.mp4", "utf-8").replaceAll("\\+", "%20"); response.setHeader("Content-disposition", "attachment;filename=" + fileName); response.setHeader("Access-Control-Expose-Headers", "Content-disposition"); response.setCharacterEncoding("utf-8"); response.setContentType("application/octet-stream"); while (fis.read(content) != -1) { //将数据写入response中 out.write(content); } out.close(); fis.close(); } } ``` <br/> **4. 表单提交** * 可以请求任意类型的文件。 1. 前端代码。 ```js function download03() { //创建表单元素 const form = document.createElement("form"); form.method = "post"; form.action = "http://localhost:8080/download03"; form.style.display = "none"; //需要携带的参数放在input中 const input = document.createElement("input"); input.name = 'path'; input.value = 'e:/upload/Numpy.mp4'; form.appendChild(input); document.body.appendChild(form); form.submit(); document.body.removeChild(form); } ``` 2. java代码。 ```java @RestController public class DownloadController { @RequestMapping("/download03") public void download03(@RequestParam("path") String path, HttpServletResponse response) throws IOException { OutputStream out = response.getOutputStream(); FileInputStream fis = new FileInputStream(path); byte[] content = new byte[1024]; String filename = "下载文件.mp4"; //设置导出的文件类型 response.setContentType("application/octet-stream"); //设置导出的文件名 response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(filename, "UTF-8")); while (fis.read(content) != -1) { //将数据写入response中 out.write(content); } out.close(); fis.close(); } } ```