JavaScript export pictures and data to Excel
Solved the following problems:
1. Solved the problem of picture size
2. Solved the problem that the last 3 digits of the ID number are 0
3. Time conversion problem
Complete Tuha first
The first problem encountered is that the picture is in base64 format. If it is in a normal format (http or .jpg), it can be downloaded normally, but this time it is in base64 format, and then the export will encounter the problem of being empty. By the way, the The problem of image size is solved, if the width and height are not increased, the image will be too large after exporting
"<td><img src='data:image/jpg;base64," +row[key] + ' ' + 'width=' + width + ' ' + 'height=' + height + ' /></td>';
Then there is the problem that the last three digits of the ID card show 000.
I checked a lot on the Internet and said that it is a text problem in excel. The number of words is too long. I found two methods. Method
one
tbody +=`<td style="text-align:center;">${
row[key].toString() + ','} </td>`
Method Two
tbody +=`<td style="text-align:center;mso-number-format:'\@'">${
row[key]} </td>`
Finally solve the time problem
There are many problems to solve the timestamp conversion, just write one
function add0(m) {
return m < 10 ? "0" + m : m;
}
function format(shijianchuo) {
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return (
y +
"-" +
add0(m) +
"-" +
add0(d) +
" " +
add0(h) +
":" +
add0(mm) +
":" +
add0(s)
);
}
Oh, by the way, there is still a header data that has not been stained, just post a few useful ones
theadData: [
{
type: "CustomerPhoto",
title: "照片",
},
{
type: "CustomerIdCard",
title: "身份证号",
},
{
type: "CreateTime",
title: "时间",
},
...
],
The most, the most, the most, the most, the most, the most, the most, the most,
the complete code is attached
tableToNotIE() {
// 编码要用utf-8，不然会出现中文乱码
let uri = "data:application/vnd.ms-excel;base64,",
template =
'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = (s, c) => {
return s.replace(/{(\w+)}/g, (m, p) => {
return c[p];
});
};
return (table, name) => {
let ctx = {
worksheet: name,
table,
};
//创建下载
let link = document.createElement("a");
link.setAttribute("href", uri + base64(format(template, ctx)));
link.setAttribute("download", name);
link.click();
};
},
// 导出
export2Excel(theadData, tbodyData, dataname) {
let th_len = theadData.length; // 表头的长度
let tb_len = tbodyData.length; // 记录条数
let width = 40; // 设置图片大小
let height = 40;
let newTime = new Date();
this.exportTime = format(newTime);
// 添加表头信息
let thead =
"<thead><tr style='margin-bottom:10px;font-size: 22px'><th colspan='12'>季卡列表</th></tr>";
let tr = "<tr>";
for (let i = 0; i < th_len; i++) {
tr += "<th>" + theadData[i].title + "</th>";
}
let tr2 =
"<tr><th style='width: 100px'>导出时间</th><th colspan='11'>" +
this.exportTime +
"</th></tr>";
thead += tr2 + tr + "</tr></thead>";
let tbody = "<tbody>";
for (let i = 0; i < tb_len; i++) {
tbody += "<tr>";
let row = tbodyData[i]; // 获取每一行数据
for (let j = 0; j < theadData.length; j++) {
for (let key in row) {
if (theadData[j].type == key) {
if (key == "CustomerPhoto") {
tbody +=
"<td><img src=data:image/jpg;base64," +
row[key] +
' ' + 'width=' + width + ' ' + 'height=' + height + ' /></td>';
} else if (key == "CreateTime") {
tbody += `<td style="text-align:center"> ${
format(
row[key]
)} </td>`;
} else if (key == "CustomerIdCard") {
tbody +=
`<td style="text-align:center;mso-number-format:'\@'">${
row[key]} </td>`
} else {
tbody += '<td style="text-align:center">' + row[key] + "</td>";
}
}
}
}
tbody += "</tr>";
}
tbody += "</tbody>";
function add0(m) {
return m < 10 ? "0" + m : m;
}
function format(shijianchuo) {
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return (
y +
"-" +
add0(m) +
"-" +
add0(d) +
" " +
add0(h) +
":" +
add0(mm) +
":" +
add0(s)
);
}
let table = thead + tbody;
// 导出表格
tableToNotIE(table, "季卡列表");
},