WEB前端 实现生成文件 并下载

    
<!doctype html>
<html manifest="/web/log.manifest">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="width:100%">
   <div style="margin:auto;width:700;height:auto">
 请输入数据:<br>
<textarea id="datas"   placeholder="请输入要下载的数据,用逗号分开"  style="width:500px;height:500px;">
班级,姓名
4-10,张三
4-10,李四
</textarea>
<a id="download" href="#"  download>下载</a>
   </div>
</body>

<script>
var download_flag = (function(){
     var flag = false;
	 return {
	    set:function(f){
		   flag = f;
		},
		get:function(){
		   return flag;
		}
	 }
})();


document.getElementById("download").onclick = function(){
   //  var data = ['你好,你好,你好\nd,e,f'];   
	 var data = document.getElementById("datas").value;
	
	// var data = 'a,b,c\nd,e,f\n';   
	 console.log(data);

     if(download_flag.get()==true){
	     download_flag.set(false);
		 return true;
	 }else{
	     saveCSV(data);     //下载
		 return false;
	 }

}



	function saveCSV(_data){
		window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
		console.log(requestFileSystem);
		window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024*1024, function(grantedBytes) {
			window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs){
				fs.root.getFile('log.csv', {create: true}, function(fileEntry) {
				fileEntry.createWriter(function(fileWriter) {
					fileWriter.onwriteend = function(e) {
						var url = fileEntry.toURL();
					    document.getElementById("download").href = url;		//此处把下载代码写入下载的链接中
                        download_flag.set(true);
                        document.getElementById("download").click();
					     
					};
					fileWriter.onerror = function(e) {
						//文件创建失败
					};
					/**************************************************************/
					var bolb = new Blob([_data],{type:'text/plain'});
					fileWriter.write(bolb);
				
				}, function(){});
		
				}, function(){});
			});
		}, function(e) {
			console.log('Error', e);
		});
	}

	
						
</script>
</html>


遇到了一个问题: 生成的文件总是utf-8格式的, office软件如果文件为utf-8容易乱码,  查了N多资料, 想生成gbk的,但始终不行,求解决方案 

在 Java 中,您可以使用 Spring Boot 框架来提供接口实现文件下载功能。同时,前端可以使用 JavaScript 在浏览器中生成下载 txt 文档。下面是一个示例代码: Java 后端代码(使用 Spring Boot): ```java import org.springframework.core.io.Resource; import org.springframework.core.io.UrlResource; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import java.io.IOException; import java.net.MalformedURLException; import java.nio.file.Path; import java.nio.file.Paths; @Controller @RequestMapping("/download") public class DownloadController { @GetMapping("/txt") public ResponseEntity<Resource> downloadTxtFile() throws IOException { // 生成下载的文本内容 String content = "This is a sample text file."; // 创建临时文件并写入内容 Path tempFile = Paths.get("temp.txt"); Files.write(tempFile, content.getBytes()); // 创建资源对象 Resource resource = new UrlResource(tempFile.toUri()); // 设置文件下载响应头 return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"temp.txt\"") .contentType(MediaType.TEXT_PLAIN) .body(resource); } } ``` 在上述示例代码中,我们创建了一个名为 `DownloadController` 的控制器,其中包含了一个 `/download/txt` 的接口。该接口会生成一个临时的 txt 文件,并返回给前端进行下载前端代码(使用 JavaScript): ```html <!DOCTYPE html> <html> <head> <title>Generate and Download Text File</title> </head> <body> <button onclick="generateAndDownloadFile()">Download Text File</button> <script> function generateAndDownloadFile() { // 生成文本内容 var content = "This is a sample text file."; // 创建 Blob 对象 var blob = new Blob([content], { type: 'text/plain' }); // 创建下载链接 var downloadLink = document.createElement('a'); downloadLink.href = window.URL.createObjectURL(blob); downloadLink.download = 'sample.txt'; // 模拟点击下载链接 downloadLink.click(); } </script> </body> </html> ``` 在上述示例代码中,我们创建了一个包含一个按钮的 HTML 页面。当用户点击按钮时,会调用 JavaScript 函数 `generateAndDownloadFile()` 来生成下载 txt 文件。 希望这个示例能够满足您的需求!如果有任何问题,请随时追问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值