这两天遇到一个问题，即前端能获取到一个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 class="downloads">
<button class="downloadE" onclick="downloadExcel()" >导出表格</button><span id="downloadExcel"></span><!-- -->
<button class="downloadP" onclick="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(*▽*)咻咻咻-------------------- */
1979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
