var submitData = {
images: [],
params: [],
compstr: []
};
var uploadImgs = [];
var layerIndex = 0;
var attrList = null;
$(function () {
$("#inputs").change(function (e) {
var upload = $(this)[0];
var file = upload.files[0];
var fileData = new FormData();
fileData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/handle/uploadfile", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var ret = JSON.parse(xhr.responseText);
console.log('onreadystatechange===>', ret);
if (ret.code == 1) {
layer.msg("文件上传成功。");
$("#uploadBox").append('');
uploadImgs.push(ret.imgSite + ret.data);
} else {
layer.msg("文件上传失败。");
}
}
};
xhr.send(fileData);
layer.msg("图片上传中...");
});
$.getJSON("/handle/GetAttrList", function (ret) {
console.log('GetAttrList', ret);
attrList = ret.data;
})
})
function selectClass(o) {
var me = $(o);
if (!me.hasClass("active")) {
submitData["classname"] = me.attr("title");
submitData["bigimg"] = me.attr("path");
me.addClass("active").siblings(".active").removeClass("active");
$("#classImg").attr("src", me.attr("path"));
var elem = null;
var classId = me.attr("data-id");
$("select.bind").each(function () {
elem = $(this);
elem.html("");
var attrName = elem.attr("title");
console.log("attrName=>", attrName);
var m2 = attrList.find(m => m.AttrName == attrName);
if (m2 && m2.AttrValues) {
elem.append((""));
var list1 = m2.AttrValues.filter(m => m.ClassId == classId);
for (var t = 0; t < list1.length; t++) {
var m3 = list1[t];
console.log('opt-data-' + t, m3);
elem.append((""));
}
}
})
}
}
function selectEvent(o) {
var elem = $(o);
var value = elem.val();
var key = elem.attr("title");
if (!submitData.params) {
submitData.params = [];
}
submitData.params.push(key + ":" + value);
}
function create(o) {
var btn = $(o);
if (btn.hasClass("disabled")) {
return;
}
if (!submitData.classname) {
var elem1 = $(".tab-class.active");
submitData["classname"] = elem1.attr("title");
submitData["bigimg"] = elem1.attr("path");
}
var dt = new Date();
var strParams = "";
var arrParams = [];
$(".bianhao_ul select").each(function () {
var me = $(this);
var v = me.val();
var key = me.attr("title");
if (v) {
arrParams.push(key + ":" + v);
strParams += '
' + key + ':' + v + '
';
}
else {
layer.msg("请选择" + key);
return false;
}
});
if (arrParams.length != $(".bianhao_ul select").length) {
return;
}
submitData.params = JSON.stringify(arrParams);
var arr1 = [];
$("#comp-list .chk_1:checked").each(function () {
var me = $(this);
arr1.push(me.attr("path"));
});
submitData.compstr = JSON.stringify(arr1);
submitData.remark = $("#remark").val();
submitData.name = $("#name").val();
submitData.company = $("#company").val();
submitData.tellphone = $("#tellphone").val();
submitData.email = $("#email").val();
if (!submitData.name) {
layer.msg("请输入您的姓名");
return;
}
if (!submitData.company) {
layer.msg("请输入您的公司名称");
return;
}
if (!submitData.tellphone) {
layer.msg("请输入联系电话");
return;
}
if (!submitData.email) {
layer.msg("请输入电子邮箱");
return;
}
var strImages = "";
console.log("submitData----", submitData);
if (uploadImgs) {
submitData.images = JSON.stringify(uploadImgs);
}
layer.msg("数据提交中....");
$.post('/handle/submitnaming', submitData, function (ret) {
console.log("post-ret=>",ret);
if (ret.code == 1) {
var m = ret.data;
layer.msg("数据保存成功,正在生成并下载PDF文件...");
$("#tab_createtime").text(formatDate(dt, "yyyy-MM-dd HH:mm:ss"));
$("#tab_classname").html(m.ClassName);
$("#tab_classimg").attr("src", m.BigImg);
$("#tab_params").html(strParams);
if (m.CompStr) {
var arr2 = JSON.parse(m.CompStr);
var strComp = "";
arr2.forEach(m => {
strComp += '';
})
$("#tab_comp").html(strComp);
}
if (m.Images) {
var arr3 = JSON.parse(m.Images);
var strImages = "";
arr3.forEach(path => {
strImages += '';
})
$("#tab_images").html(strImages);
}
$("#tab_name").text(submitData.name);
$("#tab_company").text(submitData.company);
$("#tab_tellphone").text(submitData.tellphone);
$("#tab_email").text(submitData.email);
$("#tab_remark").text(submitData.remark);
setTimeout(function () {
PdfDownload('pdf_con', ret.data.Id);
}, 500);
}
else {
layer.msg(ret.msg);
}
});
}
const PdfDownload = function (domId, code) {
var targetDom = $('#' + domId)
// 把需要导出的pdf内容clone一份,这样对它进行转换、微调等操作时才不会影响原来界面
var copyDom = targetDom.clone()
// 新的div宽高跟原来一样,高度设置成自适应,这样才能完整显示节点中的所有内容(比如说表格滚动条中的内容)
copyDom.width(targetDom.width() + 'px')
copyDom.height(targetDom.height() + 30 + 'px');
copyDom.removeAttr("id");
$('body').append(copyDom)// ps:这里一定要先把copyDom append到body下,然后再进行后续的
setTimeout(function () {
executeDown(copyDom[0], code)
}, 500);
}
function executeDown(copyDom, code) {
html2canvas(copyDom, {
onrendered: function (canvas) {
var imgData = canvas.toDataURL();
var img = new Image();
img.src = imgData;
img.setAttribute("crossOrigin", "Anonymous");
// 根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要*0.225是因为比例问题
img.onload = function () {
// 此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题
if (this.width > this.height) {
var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
} else {
var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
}
doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
// 根据下载保存成不同的文件名
doc.save('order_' + code + '.pdf');
// 删除复制出来的div
copyDom.remove();
location.reload();
}
},
background: '#FFF',
// 这里给生成的图片默认背景,不然的话,如果你的html根节点没设置背景的话,会用黑色填充。
allowTaint: true // 避免一些不识别的图片干扰,默认为false,遇到不识别的图片干扰则会停止处理html2canvas
})
}
// 将图片转换为Base64
function imageUrlToBase64(img) {
// 一定要设置为let,不然图片不显示
let image = new Image();
// 解决跨域问题
image.setAttribute('crossOrigin', 'anonymous');
let imageUrl = img;
image.src = imageUrl;
// image.onload为异步加载
image.onload = () => {
getImageBase64(image);
};
};
function getImageBase64(image) {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let quality = 0.8;
// 这里的dataurl就是base64类型
let dataURL = canvas.toDataURL('image/jpeg', quality);
};
/****数组扩展方法***/
var formatDate = function (v, format) {
if (!v) return "";
var d = v;
if (typeof v === 'string') {
if (v.indexOf("/Date(") > -1)
d = new Date(parseInt(v.replace("/Date(", "").replace(")/", ""), 10));
else
d = new Date(Date.parse(v.replace(/-/g, "/").replace("T", " ").split(".")[0]));
}
var o = {
"M+": d.getMonth() + 1, //month
"d+": d.getDate(), //day
"H+": d.getHours(), //hour
"m+": d.getMinutes(), //minute
"s+": d.getSeconds(), //second
"q+": Math.floor((d.getMonth() + 3) / 3), //quarter
"S": d.getMilliseconds() //millisecondjsonca4
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
Array.prototype.remove = function (i) {
if (isNaN(i) || i > this.length) { return false; }
this.splice(i, 1);
}
Array.prototype.select = function (callback) {
var arrResult = [];
for (var i = 0; i < this.length; i++) {
if (callback(this[i])) {
arrResult.push(this[i]);
}
}
return arrResult;
}
Array.prototype.get = function (callback) {
for (var i = 0; i < this.length; i++) {
if (callback(this[i])) {
return this[i];
}
}
return null;
}
Array.prototype.dele = function (callback) {
var newArray = [];
for (var i = 0; i < this.length; i++) {
if (!callback(this[i])) {
newArray.push(this[i]);
}
}
return newArray;
}
Array.prototype.done = function (callback) {
for (var i = 0; i < this.length; i++) {
callback(this[i]);
}
}