課件代碼：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(); } } ```