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) {
            }
        }

    }

此文結束

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章