如果您对原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解原生JavaScript实现json
如果您对原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能的各种细节，此外还有关于JavaScript javaScript中的Date 以及对原生javaScript的扩展、javascript – 将json数据转换为数组、JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解、JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解_javascript技巧的实用技巧。
本文目录一览：- 原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能
- JavaScript javaScript中的Date 以及对原生javaScript的扩展
- javascript – 将json数据转换为数组
- JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
- JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解_javascript技巧
原生JavaScript实现json数据转Excel以及对照片URL数组进行统一打包zip集中下载功能
这两天遇到一个问题，即前端能获取到一个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 type="text/javascript" src="./js/detail2.js"></script>
<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 src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<link rel="stylesheet" href="css/detail.css">
</head>
<body><!-- -->
<div>
<buttononclick="downloadExcel()" >导出表格</button><span id="downloadExcel"></span><!-- -->
<buttononclick="downloadPhoto()" >导出照片</button><span id="downloadPhoto"></span><!-- -->
</div>
</body>
</html>
CSS：
.downloads{
float: right;
position: relative;
weight: 650px;
height: 50px;
background-color: white;
border-radius: 10px;
text-align: center;
left: 0px;
right: 100px;
border: 0px solid #4396fe;
top: 0;
}
.downloadE{
position:relative;
width: 80px;
height: 30px;
right:5px;
top:10px;
background-color: white;
color: #2f81ff;
border-radius: 5px;
text-align: center;
border: 1.8px solid #4396fe;
mso-margin-bottom-alt: auto;
}
.downloadP{
position:relative;
width: 80px;
height: 30px;
left: 0px;
right: 110px;
top:10px;
background-color: white;
color: #2f81ff;
border-radius: 5px;
text-align: center;
border: 1.8px solid #4396fe;
mso-margin-bottom-alt: auto;
}
JavaScript：
var globalUrl = "http://**.***.2**.**:端口/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].photoFileUrl.slice(37, 46)+"_"+data[i].id);//.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);
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);//打印异常信息
});
}
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("数据下载失败！")
}
});
}师姐版解决方案（照片下载）：
<!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(*////▽////*)咻咻咻--------------------*/
JavaScript javaScript中的Date 以及对原生javaScript的扩展
原生JavaScript中的Date
JS Date 对象用于处理日期和时间。
创建 Date 对象的语法：
var myDate=new Date()
Date 对象会自动把当前日期和时间保存为其初始值。
参数形式有以下５种：
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);
经测试一下几种也可以：
new Date(yyyy-MM-dd HH:mm:ss);
new Date(yyyy/MM/dd HH:mm:ss);
测试截图：
注意最后一种形式，参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。各种函数的含义如下：
month:用英文表示月份名称，从January到December
mth:用整数表示月份，从0-11(1月到12月)
dd:表示一个月中的第几天，从1到31
yyyy:四位数表示的年份
hh:小时数，从0（午夜）到23（晚11点）
mm:分钟数，从0到59的整数
ss:秒数，从0到59的整数
ms:毫秒数，为大于等于0的整数
如：
new Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new Date(1137075575000);
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
对JavaScript中的Date格式化的扩展
方法一：这个很不错，好像是 csdn 的 Meizz 写的：
