1. 技术文章
  2. 原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能

原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能

由 与世无争的帅哥 提交于 2020-02-26 13:14:08

这两天遇到一个问题，即前端能获取到一个json对象，需求是通过点击按钮即可保存Excel表格和照片，即提取特定的数据加上title导出为Excel格式的文档保存到本地以及再把特定照片链接数据提取出来丢进一个数组，然后再编写函数对其逐一循环统一放进一个文件里打包成zip下载，之前找了好多方法但是由于js是依托于浏览器等原因都只能是单张处理。最后实在无赖就请教了一些师姐，她人挺好立马找来了demo（见片尾师姐版解决方案），好了话不多说上代码： 其包括多张处理与统一处理打包成zip处理并提供自定义命名+后缀处理。

HTML：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>详情页</title>
		<script src="./js/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/detail.css">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.js"></script>
		<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
	</head>
	<body>
	<div class="download">
		<button onclick="downloadExcel()">exportExcel</button><span id="downloadExcel"></span>
		<button onclick="downloadPhoto()">exportPhoto</button><span id="downloadPhoto"></span>
	</body>
	<script type="text/javascript" src="./js/detail2.js"></script>
</html>

JavaScript：


var globalUrl = "http://00.000.000.00:8089/admin"
var datas = [];
function downloadExcel() {
	// alert("download！")
	var names = [];
	var jsonData = [];
	var suffix = [];
	$(function() {
		$.ajax({
			type: "get",
			url: globalUrl + "/getAll",
			success: function(data) {
				datas=data;
				var strs="";
					// console.log("888")
					alert("正在生成......！")
				$("table").append(strs);
				for(let i=0;i<data.length;i++) {
					var obj = {
						id: data[i].id,
						cementPlant: data[i].cementPlant,//所在厂
						affiliatedCompanyDistributor: data[i].affiliatedCompanyDistributor,//所属公司/经销商
						licensePlateNumber: data[i].licensePlateNumber,//车牌号
						vehicleOwner: data[i].vehicleOwner,//司机
						cellPhoneNumber: data[i].cementPlant,//手机号码
						idNumber: data[i].idNumber,//身份证号码
						vehicleType: data[i].vehicleType,//车型
						loads: data[i].loads,//载重
						axleNumber: data[i].axleNumber,//轴数
						installationTime: data[i].installationTime,//安装时间
					};
					names.push(data[i].photoFileUrl.slice(37, 46));//.replace("/","-")
					var tmp=data[i].photoFileUrl.substring(data[i].photoFileUrl.length-3);
					suffix.push("."+tmp);
					jsonData.push(obj);//http://60.205.218.96:8083/uploadFile/2020/2/12
				}
				// alert(JSON.stringify(jsonData));
				// //列标题，逗号隔开，每一个逗号就是隔开一个单元格
				var str = "id编号,所在厂,所属公司/经销商,车牌号,司机,手机号码,身份证号码,车型,载重,轴数,安装时间\n";
				//增加\t为了不让表格显示科学计数法或者其他格式
				for(let i = 0 ; i < jsonData.length ; i++ ){
					for(let item in jsonData[i]){
						str+=`${jsonData[i][item] + '\t'},`;
					}
					str+='\n';
				}
				//encodeURIComponent解决中文乱码
				let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
				//通过创建a标签实现
				var link = document.createElement("a");
				link.href = uri;
				//对下载的文件命名
				link.download =  "jsonExcel.xls";
				document.body.appendChild(link);
				link.click();

			},
			error: function(data) {
				alert("数据下载失败！")
			}

		});
	})
}

	function downloadPhoto(){
	// photoFileUrl
		var names = [];
		var jsonData = [];
		var suffixs = [];
		var photoLink = [];
		$.ajax({
			type: "get",
			url: globalUrl + "/getAll",
			success: function(data) {
				var strs="";
				var arrays = [];
				// console.log("888")
				// alert("正在生成......！")
				// alert(JSON.stringify(data));
				$("table").append(strs);
				for(let i=0;i<data.length;i++) {
					var obj = {
						id: data[i].id,
						cementPlant: data[i].cementPlant,//所在厂
						affiliatedCompanyDistributor: data[i].affiliatedCompanyDistributor,//所属公司/经销商
						licensePlateNumber: data[i].licensePlateNumber,//车牌号
						vehicleOwner: data[i].vehicleOwner,//司机
						cellPhoneNumber: data[i].cementPlant,//手机号码
						idNumber: data[i].idNumber,//身份证号码
						vehicleType: data[i].vehicleType,//车型
						loads: data[i].loads,//载重
						axleNumber: data[i].axleNumber,//轴数
						installationTime: data[i].installationTime,//安装时间
					};
					names.push(data[i].id+"_"+data[i].photoFileUrl.slice(37, 46));//.replace("/","-")
					var tmp=data[i].photoFileUrl.substring(data[i].photoFileUrl.length-3);
					suffixs.push("."+tmp);
					jsonData.push(obj);//http://60.205.218.96:8083/uploadFile/2020/2/12
					photoLink.push(data[i].photoFileUrl);
				}
				// alert(JSON.stringify(jsonData));
				// alert(names);
				// alert(suffixs);
				// alert(photoLink);

				//js下载文件并支持修改文件名称
				//url:文件地址 filename:想要修改为的名称 "http://60.205.218.96:8083/uploadFile/2020/2/13/52d0882643ef40139c50716af16478c8.jpg"
				var url=data[1].photoFileUrl;
				var filename=names[1]+suffixs[1];
				function download(url, filename) {
					getBlob(url, function (blob) {
						saveAs(blob, filename);
					});
				};
				function getBlob(url, cb) {
					var xhr = new XMLHttpRequest();
					xhr.open('GET', url, true);
					xhr.responseType = 'blob';
					xhr.onload = function () {
						if (xhr.status === 200) {
							cb(xhr.response);
						}
					};
					xhr.send();
				}
				function saveAs(blob, filename) {
					if (window.navigator.msSaveOrOpenBlob) {
						navigator.msSaveBlob(blob, filename);
					} else {
						var link = document.createElement('a');
						var body = document.querySelector('body');
						link.href = window.URL.createObjectURL(blob);
						link.download = filename;
						// fix Firefox
						link.style.display = 'none';
						body.appendChild(link);
						link.click();
						body.removeChild(link);
						window.URL.revokeObjectURL(link.href);
					};
				}
				// download(url,filename);

				//单张
				// photoLink.map(function(i){
				// 	var a = document.createElement('a');
				// 	a.setAttribute('download','');
				// 	a.href=i;
				// 	document.body.appendChild(a);
				// 	a.click();
				// })

				function packageImages(){
					$('#downloadPhoto').text('处理中......');
					var imgs = photoLink;//$('img');
					// alert(JSON.stringify(imgs));
					var imgsSrc = [];
					var imgBase64 = [];
					var imageSuffix = [];//图片后缀
					var zip = new JSZip();
					zip.file("readme.txt", "照片以'ID_日期'命名\n");
					var img = zip.folder("images");

					for(var i=0;i<photoLink.length;i++){
						var src = imgs[i];//getAttribute("src");
						var suffix = src.substring(src.lastIndexOf("."));
						imageSuffix.push(suffix);

						getBase64(imgs[i])//.getAttribute("src")
							.then(function(base64){
								console.log(base64)
								imgBase64.push(base64.substring(22));
							},function(err){
								console.log(err);//打印异常信息
							});
					}
					alert("3");
					function tt(){
						setTimeout(function(){
							if(imgs.length == imgBase64.length){
								for(var i=0;i<imgs.length;i++){
									img.file(names[i]+imageSuffix[i], imgBase64[i], {base64: true});//放入base64即可
									console.log(imgBase64[i]);
								}
								zip.generateAsync({type:"blob"}).then(function(content) {
									saveAs(content, "photos.zip");
								});
								$('#status').text('处理完成。。。。。');
							}else{
								$('#status').text('已完成：'+imgBase64.length+'/'+imgs.length);
								tt();
							}
						},100);
					}
					tt();
				}
				//传入图片路径，返回base64
				function getBase64(img){
					function getBase64Image(img,width,height) {
						var canvas = document.createElement("canvas");
						canvas.width = width ? width : img.width;
						canvas.height = height ? height : img.height;
						var ctx = canvas.getContext("2d");
						ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
						var dataURL = canvas.toDataURL();
						return dataURL;
					}
					var image = new Image();
					image.crossOrigin = 'Anonymous';
					image.src = img;
					var deferred=$.Deferred();
					if(img){
						image.onload =function (){
							deferred.resolve(getBase64Image(image));
						}
						return deferred.promise();
					}
				}
				packageImages();
			},
			error: function(data) {
				alert("数据下载失败！")
			}
		});
	}


$(function() {
	$.ajax({
		type: "get",
		url: globalUrl + "/getAll",
		success: function(data) {
			//	console.log(res)
			var str = ""
			for (var i = 0; i < data.length; i++) {
				str += '<tr><td>' + data[i].id + '</td><td>' + data[i].cementPlant + '</td><td>' + data[i].affiliatedCompanyDistributor +
					'</td><td>' +
					data[i].licensePlateNumber + '</td><td>' + data[i].vehicleOwner + '</td><td>' + data[i].cellPhoneNumber +
					'</td><td>' + data[i].idNumber + '</td><td>' +
					data[i].vehicleType + '</td><td>' + data[i].loads + '</td><td>' + data[i].axleNumber + '</td><td>' + data[
						i].installationTime
					// + '</td><td> <button id="delUser" name=' +
					// data[i].id + ' onclick="delUser(' + data[i].id +
					// ')">删除</button><button class="btn btn-primary update" data-toggle = "modal" ' +
					// 'data-target = "#movemodal">修改</button><button class="viewbtn">查看</button></td></tr>'

			}//alert(str);
			$("table").append(str);
		}
	});
})

//删除
function delUser(uid) {
	var mymessage = confirm("确认删除吗?");
	console.log(uid);
	if (mymessage == true) {
		$.ajax({
			url: globalUrl + "/del",
			async: false,
			type: 'get',
			data: {
				id: uid
			},
			success: function(data) {
				window.location.href = window.location.href;
				alert("删除成功");
				if (data == 0) {
					$("button[name=refresh]").click();
				}
			},
			error: function(data) {
				alert("服务器繁忙")
			}
		});

	}
}


var that = null
//外部修改按钮事件
$(document).on("click", ".update", function() {
	that = $(this).parents("tr")
	var arr = []
	$(this).parents("tr").find("td").each(function() {
		arr.push($(this).text())
	})
	$("#movemodal").find("input").each(function(i) {
		$(this).val(arr[i])
	})
})

//模态框(详细修改页面)中的修改按钮事件
$(".addbtn_ok").click(function() {
	var id = $("#id").val();
	var cementPlant = $("#cementPlant").val();
	var affiliatedCompanyDistributor = $("#affiliatedCompanyDistributor").val();
	var licensePlateNumber = $("#licensePlateNumber").val();
	var vehicleOwner = $("vehicleOwner").val();
	var cellPhoneNumber = $("#cellPhoneNumber").val();
	var idNumber = $("#idNumber").val();
	var vehicleType = $("#vehicleType").val();
	var loads = $("#loads").val();
	var axleNumber = $("#axleNumber").val();
	var installationTime = $("#installationTime").val();

	$.ajax({
		url: globalUrl + "/updateInfo",
		type: "post",
		data: {
			id: id,
			cementPlant: cementPlant,
			affiliatedCompanyDistributor: affiliatedCompanyDistributor,
			licensePlateNumber: licensePlateNumber,
			vehicleOwner: vehicleOwner,
			cellPhoneNumber: cellPhoneNumber,
			idNumber: idNumber,
			vehicleType: vehicleType,
			loads: loads,
			axleNumber: axleNumber,
			installationTime: installationTime
		},
		dataType: "text",
		contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
		success: function(data) {
			if (data == "success") {
				alert("数据更新失败,请重试!");
			} else {
				alert("\n\n数据更新成功,请注意查看!");
				window.location.href = window.location.href;
			}
		}
	});
})

//模态框(详细修改页面)中的取消修改按钮事件
$(document).on("click", ".addbtn_no", function() {
	$(".movefade").fadeOut(600)
})

$(document).on("click", ".modal-header i", function() {
	$(".movefade").fadeOut(600)
})

//外部查看按钮事件
var arrView = []
$(document).on("click", ".viewbtn", function() {
	arrView = []
	$(".viewfade").fadeIn(600)
	$(this).parent().siblings().each(function() {
		arrView.push($(this).text())
	})
	$(".modal-body").find("p span").each(function(i) {
		$(this).text(arrView[i])
		console.log(arrView)
	})
})

//模态框中的查看取消按钮事件
$(document).on("click", ".addbtn_no", function() {
	$(".viewfade").fadeOut(600)
})

$(document).on("click", ".modal-header i", function() {
	$(".viewfade").fadeOut(600)
})

师姐版解决方案（照片下载）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>

		<!-- 注意图片的路径和项目域名必须不能存在跨域情况
		例如:项目部署在 域名为 www.baidu.com/index.html
		那么图片路径应改为 www.baidu.com/img/2.png -->
		<!-- 链接可来自网络其他URL -->
		<img src="http://60.205.218.96:8089/uploadFile/2020-2-19/331.jpg" />
		<img src="http://60.205.218.96:8089/uploadFile/2020-2-19/337.jpg" />
		
		<br /><br />
		<button onclick="packageImages()">packageImages</button><span id="status"></span><br /><br />
		
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
		<script type="text/javascript">
		function packageImages(){
			$('#status').text("处理中。。。。。");
			
			var imgs = $('img');
			alert(JSON.stringify(imgs));
			var imgsSrc = [];
			var imgBase64 = [];
			var imageSuffix = [];//图片后缀
			var zip = new JSZip();
		    zip.file("readme.txt", "案件详情资料\n");
		    var img = zip.folder("images");
		    
			for(var i=0;i<imgs.length;i++){
				var src = imgs[i].getAttribute("src");
				var suffix = src.substring(src.lastIndexOf("."));
				imageSuffix.push(suffix);
				
				 getBase64(imgs[i].getAttribute("src"))
		            .then(function(base64){
		            	console.log(base64)
		            	imgBase64.push(base64.substring(22));
		            	 
		            },function(err){
		                  console.log(err);//打印异常信息
		            }); 
		           
			}
			function tt(){
				setTimeout(function(){
					if(imgs.length == imgBase64.length){
						for(var i=0;i<imgs.length;i++){
							img.file(i+imageSuffix[i], imgBase64[i], {base64: true});//放入base64即可
							console.log(imgBase64[i]);
						}
						zip.generateAsync({type:"blob"}).then(function(content) {
					        saveAs(content, "images.zip");
					    });
					    $('#status').text('处理完成。。。。。');
					    
					}else{
						$('#status').text('已完成：'+imgBase64.length+'/'+imgs.length);
						tt();
					}
				},100);
			}
			tt();
		}
 
    //传入图片路径，返回base64
    function getBase64(img){
        function getBase64Image(img,width,height) {
          var canvas = document.createElement("canvas");
          canvas.width = width ? width : img.width;
          canvas.height = height ? height : img.height;
 
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          var dataURL = canvas.toDataURL();
          return dataURL;
        }
        var image = new Image();
        image.crossOrigin = 'Anonymous';
        image.src = img;
        var deferred=$.Deferred();
        if(img){
          image.onload =function (){
            deferred.resolve(getBase64Image(image));
          }
          return deferred.promise();
        }
      }
    
</script>
	</body>
</html>

/*-------------------反爬虫声明o(*////▽////*)咻咻咻--------------------

作者：杨木发
版权声明：
       本文为博主倾情原创文章，整篇转载请附上源文链接！

如果觉得本文对你有所收获，你的请评论点赞 与

合理优质的转发也将是鼓励支持我继续创作的动力，

 更多精彩可百度搜索 杨木发 或：

个人网站：www.yangmufa.com    ，

开源中国：https://my.oschina.net/yangmufa    ，

Gitee：https://gitee.com/yangmufa    ，

GitHub：https://github.com/yangmufa    。

坚持创作 善于总结 开源共享 高质进步。

-------------------反爬虫声明o(*////▽////*)咻咻咻--------------------*/

标签
大数据
html文件
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!