效果：
image.png
/* eslint-disable */
let idTmr;
const getExplorer = () => {
let explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
// 判斷瀏覽器是否為IE
const exportToExcel = (data, name) => {
// 判斷是否為IE
if (getExplorer() == 'ie') {
tableToIE(data, name)
} else {
tableToNotIE(data, name)
}
}
const Cleanup = () => {
window.clearInterval(idTmr);
}
// ie瀏覽器下執(zhí)行
const tableToIE = (data, name) => {
let curTbl = data;
let oXL = new ActiveXObject("Excel.Application");
//創(chuàng)建AX對(duì)象excel
let oWB = oXL.Workbooks.Add();
//獲取workbook對(duì)象
let xlsheet = oWB.Worksheets(1);
//激活當(dāng)前sheet
let sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的內(nèi)容移到TextRange中
sel.select;
//全選TextRange中內(nèi)容
sel.execCommand("Copy");
//復(fù)制TextRange中內(nèi)容
xlsheet.Paste();
//粘貼到活動(dòng)的EXCEL中
oXL.Visible = true;
//設(shè)置excel可見屬性
try {
let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
// 結(jié)束excel進(jìn)程，退出完成
window.setInterval("Cleanup();", 1);
idTmr = window.setInterval("Cleanup();", 1);
}
}
// 非ie瀏覽器下執(zhí)行
const tableToNotIE = (function () {
// 編碼要用utf-8不然默認(rèn)gbk會(huì)出現(xiàn)中文亂碼
const 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>';
const base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
}
const format = (s, c) => {
return s.replace(/{(\w+)}/g,
(m, p) => {
return c[p];
})
}
return (table, name) => {
const ctx = {
worksheet: name,
table
}
const url = uri + base64(format(template, ctx));
if (navigator.userAgent.indexOf("Firefox") > -1) {
window.location.href = url
} else {
const aLink = document.createElement('a');
aLink.href = url;
aLink.download = name || '';
let event;
if (window.MouseEvent) {
event = new MouseEvent('click');
} else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
}
})()
const resolveOptions = (options) => {
if (options.length === 1) {
return options[0]
}
return {
column: options[0] || [],
data: options[1] || [],
excelName: options[2] || '',
captionName: options[3],
}
}
// 導(dǎo)出函數(shù)
const table2excel = (...options) => {
function getTextHtml(val) {
return `<td style="text-align: center;vnd.ms-excel.numberformat:@;">${val ? val : ''}</td>`
}
function getImageHtml(val, options) {
options = Object.assign({ width: 60, height: 60 }, options)
const valList = val ? val : []
let tdStr = ''
for (let i = 0; i < valList.length; i++) {
tdStr += `<td style="width: ${options.width}px; height: ${options.height}px; text-align: center; vertical-align: middle"><img src="${valList[i]}" width=${options.width} height=${options.height}></td>`
}
return tdStr
}
const typeMap = {
image: getImageHtml,
text: getTextHtml
}
const {
column,
data,
excelName,
captionName,
} = resolveOptions(options)
let number = data.map((e, i) => {
return e.fximage.length
})
let maxNum = Math.max(...number)
let caption = captionName ? `<caption style="font-weight:bold">${captionName}</caption>` : '';
let thead = column.reduce((result, item) => {
if (item.type == 'image') {
result += `<th style='text-align: center;' colspan="${maxNum}">${item.title}</th>`
return result
} else {
result += `<th>${item.title}</th>`
return result
}
}, '')
let tbody = data.reduce((result, row) => {
const temp = column.reduce((tds, col) => {
const options = {}
if (col.type === 'image') {
if (row.size) {
options.width = row.size[0]
options.height = row.size[1]
} else {
col.width && (options.width = col.width)
col.height && (options.height = col.height)
}
}
tds += typeMap[col.type || 'text'](row[col.key], options)
return tds
}, '')
result += `<tr>${temp}</tr>`
return result
}, '')
tbody = `<tbody>${tbody}</tbody>`
const table = caption + thead + tbody
// 導(dǎo)出表格
exportToExcel(table, excelName)
}
export default table2excel
import table2excel from "../../components/dataList";
getphoto() {
const column = [
{
title: "昵稱",
key: "title",
type: "text",
},
{
title: "時(shí)間",
key: "add_time",
type: "text",
},
{
title: "人臉照片",
key: "fximage",
type: "image",
height: 100,
width: 100,
},
];
const data = [
{
title: "xiao",
fximage: [
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
],
add_time: 1601887522, //時(shí)間戳,
},
{
title: "xiao",
fximage: [
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
],
add_time: 1601887522, //時(shí)間戳,
},
];
var datas = data;
const excelName = "人臉照片"; //文件名稱
console.log(table2excel);
table2excel(column, datas, excelName); //生成Excel表格，自動(dòng)下載
},
