Html5下载文件前后端的示例代码

这篇文章主要为大家展示了“Html5下载文件前后端的示例代码”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Html5下载文件前后端的示例代码”这篇文章吧。

一、前端代码

</!DOCTYPE html>
<html>
<head>
	<title></title>
	<script>
		function download(){
			const link = document.createElement('a')
		      link.download = "template.xlsx"
		      link.style.display = 'none'
		      link.href = 'http://localhost:8080/test/downloadTemplate'
		      document.body.appendChild(link)
		      link.click()
		}
	</script>
</head>
<body>
	<input type="button" onclick="download()" name="download" value="download" />
</body>
</html>

二、后端代码

 /**
     * 下载导入模板
     *
     * @param response
     * @return
     */
    @GetMapping(value = "downloadTemplate")
    @ResponseBody
    public void downloadTemplate(HttpServletResponse response) {
        File templatePath = new File("D:/tempTest");
        if (!templatePath.exists()) {
            templatePath.mkdirs();
        }

        InputStream in = null;
        OutputStream out = null;
        try {
            String fileName = "template.txt";
            File file = new File("D:/tempTest/" + fileName);

            if(!file.exists()){
                file.createNewFile();
            }

            in = new BufferedInputStream(new FileInputStream(file));
            // 设置response的Header
            response.addHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes()));
            response.addHeader("Content-Length", "" + file.length());
            out = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");

            byte[] buffer = new byte[1024];
            int count;
            while ((count = in.read(buffer)) > 0) {
                out.write(buffer, 0, count);
            }

            out.flush();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (in != null) {
                    in.close();

                }
                if (out != null) {
                    out.close();
                }
            } catch (IOException e) {
            }
        }

    }

以上是“Html5下载文件前后端的示例代码”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！

Html5下载文件前后端的示例代码

一、前端代码

二、后端代码

相关推荐