需求：
普通js导出文件excel具有兼容性问题，通过js-xsl导出文件API未找到导出图片的方案，实例过少，因此针对07年后以.xlsx后缀的excel文件，通过修改后缀.zip参考文件模板来实现完整OOXML文档下载。
OOXML分析xl目录下的文件，如图：http://officeopenxml.com/SScontentOverview.php
主要数据文件在worksheet目录下面
styles.xml里面存放着excel的样式数据:cellStyle
很容易看出包含，字体，边框，单元格样式信息。
sharedStrings.xml存储的excel中的字符串，excel中的字符串都是放在这个里面，共享字符串，所以往往excel的文件会比txt小。
worksheets里面是excel的sheet文件
展开单元格cols、数据sheetData:
其中r="C2"表示excel的C2这个单元格，t="s"表示该单元格是字符串，val是2表示在sharedStrings.xml里面第二个共享的字符串。
其中r="N2"表示excel的N2这个单元格，s="2"表示该单元格有样式，在styles.xml里面的cellXfs里面的第3个样式（0是第一个）。
一、简单的excel导出下载：
<template>
<div>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
<button @click='tableToExcel'>导出</button>
</div>
</template> <script>
export default {
methods:{
tableToExcel(){
//要导出的json数据
const jsonData = [
{
name:'路人甲',
phone:'123456',
email:'123@123456.com'
},
{
name:'炮灰乙',
phone:'123456',
email:'123@123456.com'
},
{
name:'土匪丙',
phone:'123456',
email:'123@123456.com'
},
{
name:'流氓丁',
phone:'123456',
email:'123@123456.com'
},
]
//列标题
let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
//Worksheet名
let worksheet = 'Sheet1'
let uri = 'data:application/vnd.ms-excel;base64,'; //下载的表格模板数据
let 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><!--[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>${str}</table></body></html>`;
//下载模板
window.location.href = uri + this.base64(template)
},
//输出base64编码
base64 (s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
}
}
</script>
这种导出更适合普通文本文件的输出：txt、doc、csv
<template>
<div>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出csv文件</p>
<button @click='tableToExcel'>导出</button>
</div>
</template> <script>
export default {
methods:{
tableToExcel(){
//要导出的json数据
const jsonData = [
{
name:'路人甲',
phone:'123456789',
email:'000@123456.com'
},
{
name:'炮灰乙',
phone:'123456789',
email:'000@123456.com'
},
{
name:'土匪丙',
phone:'123456789',
email:'000@123456.com'
},
{
name:'流氓丁',
phone:'123456789',
email:'000@123456.com'
},
]
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\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标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
</script>
<template>
<div>
<a href="javascript:;" id="download" @click="download()" download="download.doc">导出数据</a>
</div>
</template> <script>
export default {
data() {
return {
tableData:[
{
"name": "测试",
"type": "审判系统",
"proj_id": 333
}
],
};
},
methods: {
download () {
var obj = document.getElementById('download');
var str = "姓名,出生日期,地址\n";//标题
for (var i = 0; i < this.tableData.length; i++) {
var item = this.tableData[i];
str += item.name + ',' + item.type + ',' + item.proj_id;
str += "\n";
}
str = encodeURIComponent(str);
obj.href = "data:text/csv;charset=utf-8,\ufeff" + str;
obj.download = "download.doc";//文件名称+格式
},
}
}
</script>
<template>
<div>
<button @click="download()">导出数据</button>
</div>
</template> <script>
export default {
data() {
return {
tableData:[
{
"name": "测试",
"type": "审判系统",
"proj_id": 333
}
],
};
},
methods: {
download () {
var str = "姓名,出生日期,地址\n";//标题
for (var i = 0; i < this.tableData.length; i++) {
var item = this.tableData[i];
str += item.name + ',' + item.type + ',' + item.proj_id;
str += "\n";
}
console.log(str,555)
let blob = new Blob([str]);//内容
let link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = '20181114.csv';//文件名称
link.click();
},
}
}
</script>
手写一个导出方法：export2Excel ()
/* 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浏览器下执行
const tableToIE = (data, name) => {
let curTbl = data;
let oXL = new ActiveXObject("Excel.Application");
//创建AX对象excel
let oWB = oXL.Workbooks.Add();
//获取workbook对象
let xlsheet = oWB.Worksheets(1);
//激活当前sheet
let sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置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;
// 结束excel进程，退出完成
window.setInterval("Cleanup();", 1);
idTmr = window.setInterval("Cleanup();", 1);
}
}
// 非ie浏览器下执行
const tableToNotIE = (function() {
// 编码要用utf-8不然默认gbk会出现中文乱码
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
}
if (navigator.userAgent.indexOf("Firefox") > -1){
window.location.href = uri + base64(format(template, ctx))
} else {
//创建下载
let link = document.createElement('a');
link.setAttribute('href', uri + base64(format(template, ctx)));
link.setAttribute('download', name);
// window.location.href = uri + base64(format(template, ctx))
link.click();
}
}
})()
// 导出函数
export const export2Excel = (theadData, tbodyData, dataname) => {
let re = /http/ // 字符串中包含http,则默认为图片地址
let th_len = theadData.length // 表头的长度
let tb_len = tbodyData.length // 记录条数
let width = 40 // 设置图片大小
let height = 60
// 添加表头信息
let thead = '<thead><tr>'
for (let i = 0; i < th_len; i++) {
thead += '<th>' + theadData[i] + '</th>'
}
thead += '</tr></thead>'
// 添加每一行数据
let tbody = '<tbody>'
for (let i = 0; i < tb_len; i++) {
tbody += '<tr>'
let row = tbodyData[i] // 获取每一行数据
for (let key in row) {
if (re.test(row[key])) { // 如果为图片，则需要加div包住图片
tbody += '<td style="width:' + width + 'px; height:' + height + 'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' + row[key] + '\' ' + ' ' + 'width=' + '\"' + width + '\"' + ' ' + 'height=' + '\"' + height + '\"' + '></div></td>'
} else {
tbody += '<td style="text-align:center">' + row[key] + '</td>'
}
}
tbody += '</tr>'
}
tbody += '</tbody>'
let table = thead + tbody
// 导出表格
exportToExcel(table, dataname)
}
需要导出图片：
// 获取sheet名称
const getSheetsName = (dataList)=> {
let sheetsName = []
dataList.data.forEach((item) => {
sheetsName.push(item.order.order_id)
})
return sheetsName
}
// 获取文件名
const getFileName = ()=> {
let fileName = ''
let day = new Date().toLocaleDateString().split('/')
if (parseInt(day[1]) < 10) {
day[1] = '0' + day[1]
}
if (parseInt(day[2]) < 10) {
day[2] = '0' + day[2]
}
let time = new Date().toTimeString().split(' ')[0].replace(':', '').replace(':', '')
fileName = '送货单-' + day[1] + day[2] + time + '.xls'
return fileName
}
// 创建文件流
const base64ToBlob =(base64Data)=> {
let arr = base64Data.split(',')
let mime = arr[0].match(/:(.*?)/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8ClampedArray(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
// 获取所有xml代码
const getMainXml = (sheetsName_g,sheetHtml_g,qrCodes_g)=> {
let mainHtml = ''
let sheets = ''
let printFormula = '' // 打印固定头部
let codesXml = ''
if (sheetsName_g.length > 0) {
for (let i = 0; i < sheetsName_g.length; i++) {
let name = sheetsName_g[i]
let sheetItem = `
<x:ExcelWorksheet>
<x:Name>${name}</x:Name>
<x:WorksheetSource HRef=3D"dbzhao/sheet${name}.xml"/>
</x:ExcelWorksheet>`
sheets += sheetItem
printFormula += `
<x:ExcelName>
<x:Name>Print_Titles</x:Name>
<x:SheetIndex>${i + 1}</x:SheetIndex>
<x:Formula>=3D'${name}'!$1:$7</x:Formula>
</x:ExcelName>
<x:ExcelName>
<x:Name>Print_Titles</x:Name>
<x:SheetIndex>${i + 1}</x:SheetIndex>
<x:Formula>=3D'${name}'!$1:7</x:Formula>
</x:ExcelName>` let code = qrCodes_g[i] // 头部二维码
let codeXml = `
------BOUNDARY_0008----
Content-Location: file:///C:/0E8D990C/dbzhao/code${name}.xml
Content-Transfer-Encoding: base64
Content-Type: image/jpeg ${code}`
codesXml += codeXml
}
}
mainHtml = `MIME-Version: 1.0
X-Document-Type: Workbook
Content-Type: multipart/related; boundary="----BOUNDARY_0008----" ------BOUNDARY_0008----
Content-Location: file:///C:/0E8D990C/dbzhao.xml
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="us-ascii" <html xmlns:o=3D"urn:schemas-microsoft-com:office:office"
xmlns:x=3D"urn:schemas-microsoft-com:office:excel"
xmlns=3D"http://www.w3.org/TR/REC-html40"> <head>
<xml>
<o:DocumentProperties>
<o:Author>dbzhao</o:Author>
<o:LastAuthor>dbzhao</o:LastAuthor>
<o:Company>dbzhao</o:Company>
<o:Version>1.0</o:Version>
</o:DocumentProperties>
</xml>
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>${sheets}
</x:ExcelWorksheets>
</x:ExcelWorkbook>
${printFormula}
</xml>
<![endif]-->
</head>
</html>` + sheetHtml_g + ` ${codesXml} ------BOUNDARY_0008------`
return mainHtml
}
// 获取每个sheet的xml代码
const getSheetXml = (dataList)=> {
let sheetHtml = ''
let sheets = ''
for (let i = 0; i < dataList.data.length; i++) {
let name = dataList.data[i].order.order_id
// MIME要求格式必须顶格……所以这里排版比较乱……
let sheetItem = ` ------BOUNDARY_0008----
Content-Location: file:///C:/0E8D990C/dbzhao/sheet${name}.xml
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="us-ascii" <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>
<xml>
<x:WorksheetOptions>
<x:ProtectContents>False</x:ProtectContents>
<x:ProtectObjects>False</x:ProtectObjects>
<x:ProtectScenarios>False</x:ProtectScenarios>
</x:WorksheetOptions>
</xml>
<style>
<!-- @page
{mso-footer-data:"&C\\7B2C &P \\9875\\FF0C\\5171 &N \\9875";
margin:0.748in 0.195in 0.748in 0.195in;
mso-header-margin:0.51in;
mso-footer-margin:0.51in;}
-->
</style>
</head>
<body>`
let table = `
<table border="1" width="100%" rull="all" style="border-collapse:collapse;font-family:宋体;font-size:12px;">`
table += `
<tr>
<td colspan="12" height="26" style="border-bottom:1px solid #fff;border-right:1px solid #fff;"></td>
</tr>
<tr>
<td colspan="11" height="110" style="text-align:center;font-size:28px;font-weight:bold;background:#fff;vertical-align:middle;border-left:1px solid #fff;border-right:1px solid #fff;">
重庆农业科技发展有限公司<br style='mso-data-placement:same-cell;'/>送货单
</td>
<td style="border-right:1px solid #fff;">
<img src=3D'code${dataList.data[i].order.order_id}.xml' />
</td>
</tr>
<tr>
<td colspan="5" style="font-size:13px;">客户：${dataList.data[i].order.user_name}</td>
<td colspan="4" style="font-size:13px;">联系人：${dataList.data[i].order.shipping_man}</td>
<td colspan="3" style="font-size:13px;">订单号：${dataList.data[i].order.order_id}</td>
</tr>
<tr>
<td colspan="5" style="font-size:13px;">地址：${dataList.data[i].order.address}</td>
<td colspan="4" style="font-size:13px;">固定电话：${dataList.data[i].order.flPhone}</td>
<td colspan="3" style="font-size:13px;">手机：${dataList.data[i].order.shipping_phone}</td>
</tr>
<tr>
<td colspan="5" style="font-size:13px;">下单日期：${dataList.data[i].order.create_time}</td>
<td colspan="4" style="font-size:13px;">送货时间：${dataList.data[i].order.distribut_require}</td>
<td colspan="3" style="font-size:13px;">结算方式：${dataList.data[i].order.sales_model}</td>
</tr>
<tr>
<td colspan="12" height="5"></td>
</tr>
<tr>
<td width="46" height="42" style="text-align:center;font-weight:bold;">序号</td>
<td width="120" style="text-align:center;font-weight:bold;">产品名称</td>
<td width="53" style="text-align:center;font-weight:bold;">规格</td>
<td width="40" style="text-align:center;font-weight:bold;">单位</td>
<td width="44" style="text-align:center;font-weight:bold;">订单量</td>
<td width="72" style="text-align:center;font-weight:bold;">单价</td>
<td width="56" style="text-align:center;font-weight:bold;">发货量1</td>
<td width="56" style="text-align:center;font-weight:bold;">发货量2</td>
<td width="54" style="text-align:center;font-weight:bold;">签收量</td>
<td width="63" style="text-align:center;font-weight:bold;">退货量</td>
<td width="95" style="text-align:center;font-weight:bold;">金额（元）</td>
<td width="108" style="text-align:center;font-weight:bold;">备注</td>
</tr>`
if (dataList.data[i].products.length > 0) {
for (let k = 0; k < dataList.data[i].products.length; k++) {
let pro = dataList.data[i].products
let receive = parseFloat(pro[k].big_deliver_num) + parseFloat(pro[k].small_deliver_num)
let total = parseFloat(pro[k].price.split('/')[0].replace('元', '')) * receive
let tr = `
<tr>`
tr += `
<td min-height="20" style="text-align:center;font-size:13px;">${k + 1}</td>
<td style="text-align:left;font-size:13px;">${pro[k].title}</td>
<td style="text-align:center;font-size:13px;">${pro[k].spec}</td>
<td style="text-align:center;font-size:13px;">${pro[k].product_unit}</td>
<td style="text-align:center;font-size:13px;">${pro[k].buy_num}</td>
<td style="text-align:center;font-size:13px;">${pro[k].price}</td>
<td style="text-align:center;font-size:13px;">${pro[k].big_deliver_num}</td>
<td style="text-align:center;font-size:13px;">${pro[k].small_deliver_num}</td>
<td style="text-align:center;font-size:13px;">${receive}</td>
<td style="text-align:center;font-size:13px;"></td>
<td style="text-align:center;font-size:13px;">${total}</td>
<td style="text-align:left;font-size:13px;">${pro[k].remark}</td>
</tr>`
table += tr
}
}
table += `
<tr>
<td colspan="10" height="20" style="text-align:center;font-size:13px;font-weight:bold;">应 收：</td>
<td style="text-align:center;font-size:13px;">${dataList.data[i].order.total}</td>
<td></td>
</tr>
<tr>
<td colspan="10" height="20" style="text-align:center;font-size:13px;font-weight:bold;">实 收：</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" height="80" style="font-size:13px;vertical-align:middle;">
公司地址：重庆市江津区双福国际农贸市场22A-004
<br style='mso-data-placement:same-cell;'/>
联系电话：13996198545
<br style='mso-data-placement:same-cell;'/>
备注：商品数量和计量单位按实际发货为准
</td>
<td colspan="4" style="font-size:13px;vertical-align:middle;">
送货人：
<br style='mso-data-placement:same-cell;'/>
<br style='mso-data-placement:same-cell;'/>
日 期 ：
</td>
<td colspan="2" style="font-size:13px;vertical-align:middle;">
签收人：
</td>
</tr>
</table>`
sheetItem += table + `
</body>
</html>`
sheets += sheetItem
}
sheetHtml = sheets
return sheetHtml
}
export {
getSheetsName,
getFileName,
base64ToBlob,
getMainXml,
getSheetXml,
}
demo：
<template>
<div>
<el-button @click="exportExcel">导出Excel</el-button>
<el-button @click="exportImg">导出Img</el-button>
</div>
</template> <script>
import { export2Excel } from './ExportExcel.js'
import { export_json_to_excel } from './Export2Excel.js'
export default {
data () {
return {
qrCodes_g: [ // 开头：data:application/vnd.ms-excelbase64,
`data:application/vnd.ms-excelbase64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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`,
`iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAEFUlEQVR4Xu2b0Y6rMAxEL///0V3pvkGlHh2NQ8Pu9NXg2DP2OAF6vF6v17/+tkHgKCHbcPE/kBKyFx8lZDM+SkgJ2Q2BzeLpDCkhmyGwWTjYIcdx3BoyHYuu8aTXb5cfnUO2C/hSICVkcb+kAF/Do47aruDaIZtJsiWEKtg2kK1gWp/82Q6y+aT+9VAnQGwCBCDZYwDkTJrO7y3+dshZsu4uuBJyQcB24PYdYncp1wq0gNjrCUDyd3t+qWTdHvCw5peQywtKAiQd2u0QQKCS9fmNebztXS1ZqzuI/K/Ob3yXtTpgAiyVNPK/Or8SIre9JeTmod8OCQEniaJdld1UtEPkd3urAVvt/3EzhCp+NWCr/ZcQKZmPI4QqmOzfHqq0PsVPdus/PhhSQGSngFdXKK1P8ZPd+i8hww8raRdI71tKyNMJoRZN7ek5Ib0/jZ/uH+8QWjC1p4Cm96fx0/0lBCTJbhoIcLKXkN9GCDH+bbutcKrQr+dD79S/HSCtX0IIoZvtJeRmwGm5P0eITZgApG0p3X+100yg+CmeaTvlp0/q5JDslCDdX0KG/0FVQj6XXDskfD9CBUaS+vYwMt320uPl1RpOEkbx2aezlA9JLhGEHUILUMKUgK2waX8l5IJACTkD0g65FEja8aQosWTZAHHB4V2bBYDyIQmjmUXxkB07hBIgu02QArZ2K4k2XipAG28JgQ/z7CbCEqC3vdQBZLcVlyZEkjId7+0dQoBSQLbCUsAoHiJ8Ol6djz0Y6gVgiE9rfAkZ1uCU8BJSQk4qGHe8lax0ptj7SdNpJsQAScmleMiO2150EH75RxJVQogB+aiB3JWQm59llRBCYJgQt5y/enUH0UGSZp7NiHaB8QyxAdnrS4hFbPH1JWQxwNZ9CYFdlAXUXk/nhlTzU/9UIDbftxlFB8P0HGADTAGjIZz6LyHhSZkApIIjAmnXZAsSd1kUsF2QricAKlnhoxEigCqYJIj8W7uteBs/xaM7xAaMAUjCV3esza+ELP5qpYS0Q04iEkuWlRAa2mQnCaT7qQNIglI7xV9C4CBsCSbCSkgoiSUE/q9BFWYBpG219ffnOySdCSkh9qBKBfX4GVJCbpYU2sWVkBLyUXWoQH6dZNGQJU23Q5euJzsREL8PsYCkAFHCVtLIXzrk2yHyfUkJuZQcdVhqTzvy8R1iNTJNmNaLJWNxx1H88TmEFiA7SQjNCOoIWp8KhPxT/Hp9+5FDWoEEAEkWJZjGRwVA8cXrl5AzxY8jhCo0tdsKXA0gSZJdn/DRM4QcpvYSAqJHFZASkA5Nis8SPD3j7Exph8j/SBLBVGBUwEgIOah9FoESMotn7K2ExBDOOighs3jG3kpIDOGsgxIyi2fsrYTEEM46KCGzeMbefgB5wi8+XtSt2wAAAABJRU5ErkJggg==`
],
tableData: [
{ 'index': '0', "nickName": "沙滩搁浅我们的旧时光", "name": "小明" },
{ 'index': '1', "nickName": "女人天生高贵", "name": "小红" },
{ 'index': '2', "nickName": "海是彩色的灰尘", "name": "小兰" }
]
}
},
methods: {
exportImg () {
// tHeader和tbody的数据需要一一对应
let tHeader = [
'鲜花',
'颜色',
'照片'
]
let tbody = [
{
name: '玫瑰花',
color: '红色',
pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg'
},
{
name: '菊花',
color: '黄色',
pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1506844670,1837003941&fm=200&gp=0.jpg'
},
{
name: '牵牛花',
color: '紫色',
pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3056120770,1115785765&fm=27&gp=0.jpg'
},
{
name: '梅花',
color: '白色',
pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2700343322,3431874915&fm=27&gp=0.jpg'
},
{
name: '桃花花',
color: '粉色',
pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=602076004,4209938077&fm=27&gp=0.jpg'
}
]
export2Excel(tHeader, tbody, '我爱花朵')
},
//导出的方法
exportExcel () {
require.ensure([], () => {
const tHeader = ['序号', '昵称', '姓名'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
}
</script>
二、通过插件生成excel：
import XLSX from "xlsx";
require('file-saver');
require('./Blob');
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue; //Skip ranges
ranges.forEach(function (range) {
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
}
}); //Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
}
; //Handle Value
outRow.push(cellValue !== "" ? cellValue : null); //Handle Colspan
if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);
}
return [out, ranges];
}; function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
} function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {v: data[R][C]};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({c: C, r: R}); if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
}
else cell.t = 's'; ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
} function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
} function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
console.log('a')
var oo = generateArray(theTable);
var ranges = oo[1]; /* original data */
var data = oo[0];
var ws_name = "SheetJS";
console.log(data); var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); /* add ranges to worksheet */
// ws['!cols'] = ['apple', 'banan'];
ws['!merges'] = ranges; /* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'}); saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
} function formatJson(jsonData) {
console.log(jsonData)
}
export function export_json_to_excel(th, jsonData, defaultTitle) { /* original data */ var data = jsonData;
data.unshift(th);
var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); /* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
var title = defaultTitle || '列表'
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}
demo：
<template>
<div>
<el-button
style="margin-bottom:10px"
id="kp_but_1745"
type="primary"
@click="exportExcelChange"
>导出Excel</el-button>
</div>
</template> <script>
import XLSX from "xlsx";
import _ from "lodash";
import moment from 'moment';
export default {
data () {
return {
tableData: [
{ "功能模块与路径": "\\APP接口测试示例\\登录接口", "用例编号": "s_001", "前置条件": "第一个为前置条件，最后一个为预期结果，需要带相应关键字", "用例名称": "用例编写示例，用例必须有叶子结节", "操作步骤": "操作步骤直接填写，每个步骤一行", "预期结果": "用例必须有叶子结点", "标记": "", "优先级": "3", "用例属性": "", "编制人员": "", "用例设计时间": "2019-02-15", "备注": "" },
{ "功能模块与路径": "", "用例编号": "", "前置条件": "", "用例名称": "", "操作步骤": "操作步骤需要按顺序排序", "预期结果": "", "标记": "", "优先级": "", "用例属性": "", "编制人员": "", "用例设计时间": "", "备注": "" }, { "功能模块与路径": "\\APP接口测试示例\\登录接口\\身份证类型登录", "用例编号": "s_002", "前置条件": "我是前置条件，需要“前置条件”为关键字", "用例名称": "身份证登录", "操作步骤": "1，操作步骤1，按次序排列", "预期结果": "我是预期结果", "标记": "", "优先级": "3", "用例属性": "", "编制人员": "", "用例设计时间": "2019-02-15", "备注": "" },
{ "功能模块与路径": "", "用例编号": "", "前置条件": "", "用例名称": "", "操作步骤": "2，操作步骤2", "预期结果": "", "标记": "", "优先级": "", "用例属性": "", "编制人员": "", "用例设计时间": "", "备注": "" }, { "功能模块与路径": "", "用例编号": "", "前置条件": "", "用例名称": "", "操作步骤": "3，我是操作步骤3，按次序排列", "预期结果": "", "标记": "", "优先级": "", "用例属性": "", "编制人员": "", "用例设计时间": "", "备注": "" },
{ "功能模块与路径": "\\APP接口测试示例\\登录接口\\身份证类型登录", "用例编号": "s_003", "用例名称": "用例名称一定要长-登录失败", "操作步骤": "我是操作步骤", "预期结果": "如果这个是预期结果，则上层为用例", "标记": "", "优先级": "3", "用例属性": "", "编制人员": "", "用例设计时间": "2019-02-15", "备注": "" }, { "功能模块与路径": "\\APP接口测试示例\\登录接口", "用例编号": "s_004", "用例名称": "账户类型登录", "预期结果": "账户为空3", "标记": "", "优先级": "3", "用例属性": "", "编制人员": "", "用例设计时间": "2019-02-15", "备注": "" }
],
column01: ['类型', '名称', '描述'],
table01: [
{ type: "string", name: "hell", desc: "你好" },
{ type: "number", name: "111", desc: "数字111" },
{ type: "string", name: "qq", desc: "QQ号" }
],
column02: ['姓名', '年龄', '性别'],
table02: [
{ name: "z3", age: 16, sex: "男" },
{ name: "l4", age: 20, sex: "女" },
{ name: "w5", age: 24, sex: "男" },
{ name: "z6", age: 23, sex: "女" },
{ name: "ss", age: 10, sex: "不男不女" }
]
}
},
methods: {
exportExcelChange () {
const table01 = this.outputXlsxFile(this.column01, this.table01)
const table02 = this.outputXlsxFile(this.column02, this.table02)
// console.log(table01, "数据1")
// console.log(table02, "数据2")
// const worksheet = XLSX.utils.aoa_to_sheet([this.column02, this.table02]);//数组映射A1:A2
// console.log(worksheet, "数据3")
let new_workbook = XLSX.utils.book_new();
// const fileName = "接口协议"+moment().format('YYYY-MM-DD,HH:mm:ss');
XLSX.utils.book_append_sheet(new_workbook, table01, "数据信息");
XLSX.utils.book_append_sheet(new_workbook, table02, "人物信息");
console.log(new_workbook, "输出数据格式")
// 模拟数据
this.downloadExl(new_workbook)
},
outputXlsxFile (columns, data) {
let headObj = {},//生成表头
indexObj = {},//生成表内数据
renge = {};//计算出范围A1:F4
//********************************01：headObj */
for (let i = 0; i < columns.length; i++) {
let str = String.fromCharCode(65 + i) + 1;
if (i > 26) {
str = String.fromCharCode(65) + String.fromCharCode(65 + i - 26) + 1;
}
if (i > 52) {
this.$message.warning("表头太长，请做适当删减！")
}
headObj[str] = { v: columns[i] };
}
//********************************02:indexObj */
const indexArr = [];
for (let e = 0; e < data.length; e++) {
for (let j = 0; j < columns.length; j++) {
let index = String.fromCharCode(65 + j) + (e + 2);
indexArr.push(index);
}
}
for (let i = 0; i < indexArr.length; i++) {
indexObj[indexArr[i]] = { v: "" };
}
const excelArr = [];
for (let r = 0; r < data.length; r++) {
let rec = data[r];
for (let ii in rec) {
excelArr.push(rec[ii]);
}
}
for (let ind = 0; ind < indexArr.length; ind++) {
let j = 0;
for (let jj in indexObj) {
if (indexArr[ind] == jj) {
indexObj[jj].v = excelArr[j];
break;
}
j++;
}
}
//********************************03:renge */
let refS = 'A1', refE = String.fromCharCode(65 + columns.length - 1) + (data.length + 1);//范围{!ref:min:max}
renge = { '!ref': refS + ':' + refE };
//1.Lodash和Underscore是两款javaScript工具库：输出excal格式的数据
// let _data=underscore.extend(headObj,indexObj,renge);
// let _data=_.assignIn(headObj,indexObj,renge);
//2.ES6直接合并
let _data = Object.assign(headObj, indexObj, renge);
return _data
},
downloadExl (json, type,fileName,mySheet) {
// 配置文件类型
const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true }
// var tmpdata = json[0];
// json.unshift({});
// var keyMap = []; //获取keys
// for (var k in tmpdata) {
// keyMap.push(k);
// json[0][k] = k;
// }
// var tmpdata = [];//用来保存转换好的json
// json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
// v: v[k],
// position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
// }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
// v: v.v
// });
// var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
// tmpdata["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====设置xlsx单元格样式
// tmpdata["!merges"] = [{
// s: { c: 1, r: 0 },
// e: { c: 4, r: 0 }
// }];//<====合并单元格
// const sheet1 = mySheet || 'sheet1'
// var tmpWB = {
// SheetNames: [sheet1], //保存的表标题
// Sheets: {
// sheet1: Object.assign({},
// tmpdata, //内容
// {
// '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
// })
// }
// };
const tmpWB = json
const tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
{ bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary' }//这里的数据是用来定义导出的格式类型
))], {
type: ""
});
this.saveAs(tmpDown, fileName || "未命名" + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
},
// 1.下载功能
saveAs (obj, fileName) {
var tmpa = document.createElement("a");
tmpa.download = fileName || "未命名";
// 兼容ie
if ("msSaveOrOpenBlob" in navigator) {
window.navigator.msSaveOrOpenBlob(obj, fileName || "未命名" + ".xlsx");
} else {
tmpa.href = URL.createObjectURL(obj);
}
tmpa.click();
setTimeout(function () {
URL.revokeObjectURL(obj);
}, 100);
},
// 2.获取26个英文字母用来表示excel的列
getCharCol (n) {
let temCol = '',
s = '',
m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
},
//3.
s2ab (s) {
if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
}
}
</script> <style scoped>
</style>
手写OOXML模板
1.静态内容模板：
const Content_Types = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
<Default Extension="png" ContentType="image/png" />
<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml" />
<Default Extension="xml" ContentType="application/xml" />
<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml" />
<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml" />
<Override PartName="/xl/worksheets/sheet2.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml" />
<Override PartName="/xl/worksheets/sheet3.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml" />
<Override PartName="/xl/worksheets/sheet4.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml" />
<Override PartName="/xl/worksheets/sheet5.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml" />
<Override PartName="/xl/worksheets/sheet6.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml" />
<Override PartName="/xl/theme/theme1.xml" ContentType="application/vnd.openxmlformats-officedocument.theme+xml" />
<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml" />
<Override PartName="/xl/sharedStrings.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml" />
<Override PartName="/xl/drawings/drawing1.xml" ContentType="application/vnd.openxmlformats-officedocument.drawing+xml" />
<Override PartName="/xl/drawings/drawing2.xml" ContentType="application/vnd.openxmlformats-officedocument.drawing+xml" />
<Override PartName="/xl/drawings/drawing3.xml" ContentType="application/vnd.openxmlformats-officedocument.drawing+xml" />
<Override PartName="/xl/drawings/drawing4.xml" ContentType="application/vnd.openxmlformats-officedocument.drawing+xml" />
<Override PartName="/xl/drawings/drawing5.xml" ContentType="application/vnd.openxmlformats-officedocument.drawing+xml" />
<Override PartName="/xl/drawings/drawing6.xml" ContentType="application/vnd.openxmlformats-officedocument.drawing+xml" />
<Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml" />
<Override PartName="/docProps/app.xml" ContentType="application/vnd.openxmlformats-officedocument.extended-properties+xml" />
</Types> `;
const relsData = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties"
Target="docProps/app.xml" />
<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties"
Target="docProps/core.xml" />
<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument"
Target="xl/workbook.xml" />
</Relationships>
`;//
const appData = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes">
<Application>Microsoft Excel</Application>
<DocSecurity>0</DocSecurity>
<ScaleCrop>false</ScaleCrop>
<HeadingPairs>
<vt:vector size="2" baseType="variant">
<vt:variant>
<vt:lpstr>工作表</vt:lpstr>
</vt:variant>
<vt:variant>
<vt:i4>6</vt:i4>
</vt:variant>
</vt:vector>
</HeadingPairs>
<TitlesOfParts>
<vt:vector size="6" baseType="lpstr">
<vt:lpstr>k=3</vt:lpstr>
<vt:lpstr>k=4</vt:lpstr>
<vt:lpstr>k=5</vt:lpstr>
<vt:lpstr>k=6</vt:lpstr>
<vt:lpstr>k=7</vt:lpstr>
<vt:lpstr>k=8</vt:lpstr>
</vt:vector>
</TitlesOfParts>
<Company></Company>
<LinksUpToDate>false</LinksUpToDate>
<SharedDoc>false</SharedDoc>
<HyperlinksChanged>false</HyperlinksChanged>
<AppVersion>16.0300</AppVersion>
</Properties>
`;
const coreData = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<dc:creator>v_dbzhao(赵东波)</dc:creator>
<cp:lastModifiedBy>v_dbzhao(赵东波)</cp:lastModifiedBy>
<dcterms:created xsi:type="dcterms:W3CDTF">2019-10-22T06:23:04Z</dcterms:created>
<dcterms:modified xsi:type="dcterms:W3CDTF">2019-10-22T09:08:15Z</dcterms:modified>
</cp:coreProperties>
`;//
const stylesData = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="x14ac x16r2 xr" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"
xmlns:xr="http://schemas.microsoft.com/office/spreadsheetml/2014/revision">
<fonts count="2" x14ac:knownFonts="1">
<font>
<sz val="11" />
<color theme="1" />
<name val="等线" />
<family val="2" />
<charset val="134" />
<scheme val="minor" />
</font>
<font>
<sz val="9" />
<name val="等线" />
<family val="2" />
<charset val="134" />
<scheme val="minor" />
</font>
</fonts>
<fills count="2">
<fill>
<patternFill patternType="none" />
</fill>
<fill>
<patternFill patternType="gray125" />
</fill>
</fills>
<borders count="2">
<border>
<left />
<right />
<top />
<bottom />
<diagonal />
</border>
<border>
<left style="thin">
<color auto="1" />
</left>
<right style="thin">
<color auto="1" />
</right>
<top style="thin">
<color auto="1" />
</top>
<bottom style="thin">
<color auto="1" />
</bottom>
<diagonal />
</border>
</borders>
<cellStyleXfs count="1">
<xf numFmtId="0" fontId="0" fillId="0" borderId="0">
<alignment vertical="center" />
</xf>
</cellStyleXfs>
<cellXfs count="3">
<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0">
<alignment vertical="center" />
</xf>
<xf numFmtId="0" fontId="0" fillId="0" borderId="1" xfId="0" applyFill="1" applyBorder="1" applyAlignment="1">
<alignment vertical="center" />
</xf>
<xf numFmtId="0" fontId="0" fillId="0" borderId="1" xfId="0" applyBorder="1">
<alignment vertical="center" />
</xf>
</cellXfs>
<cellStyles count="1">
<cellStyle name="常规" xfId="0" builtinId="0" />
</cellStyles>
<dxfs count="0" />
<tableStyles count="0" defaultTableStyle="TableStyleMedium2" defaultPivotStyle="PivotStyleLight16" />
<extLst>
<ext uri="{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main">
<x14:slicerStyles defaultSlicerStyle="SlicerStyleLight1" />
</ext>
<ext uri="{9260A510-F301-46a8-8635-F512D64BE5F5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main">
<x15:timelineStyles defaultTimelineStyle="TimeSlicerStyleLight1" />
</ext>
</extLst>
</styleSheet>
`;
const workbookData = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x15 xr xr6 xr10 xr2" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"
xmlns:xr="http://schemas.microsoft.com/office/spreadsheetml/2014/revision" xmlns:xr6="http://schemas.microsoft.com/office/spreadsheetml/2016/revision6"
xmlns:xr10="http://schemas.microsoft.com/office/spreadsheetml/2016/revision10" xmlns:xr2="http://schemas.microsoft.com/office/spreadsheetml/2015/revision2">
<fileVersion appName="xl" lastEdited="7" lowestEdited="7" rupBuild="21328" />
<workbookPr defaultThemeVersion="166925" />
<mc:AlternateContent xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<mc:Choice Requires="x15">
<x15ac:absPath url="F:\桌面文档\Desktop\" xmlns:x15ac="http://schemas.microsoft.com/office/spreadsheetml/2010/11/ac" />
</mc:Choice>
</mc:AlternateContent>
<xr:revisionPtr revIDLastSave="0" documentId="13_ncr:1_{D386BEC6-9E8D-4A6C-9BC7-09EF2C7D6400}" xr6:coauthVersionLast="41"
xr6:coauthVersionMax="41" xr10:uidLastSave="{00000000-0000-0000-0000-000000000000}" />
<bookViews>
<workbookView xWindow="3675" yWindow="660" windowWidth="21600" windowHeight="11385" xr2:uid="{AB6A0709-83A4-4152-867C-37AB087503A3}" />
</bookViews>
<sheets>
<sheet name="k=3" sheetId="1" r:id="rId1" />
<sheet name="k=4" sheetId="2" r:id="rId2" />
<sheet name="k=5" sheetId="3" r:id="rId3" />
<sheet name="k=6" sheetId="4" r:id="rId4" />
<sheet name="k=7" sheetId="5" r:id="rId5" />
<sheet name="k=8" sheetId="6" r:id="rId6" />
</sheets>
<calcPr calcId="191029" />
<extLst>
<ext uri="{140A7094-0E35-4892-8432-C4D2E57EDEB5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main">
<x15:workbookPr chartTrackingRefBase="1" />
</ext>
<ext uri="{B58B0392-4F1F-4190-BB64-5DF3571DCE5F}" xmlns:xcalcf="http://schemas.microsoft.com/office/spreadsheetml/2018/calcfeatures">
<xcalcf:calcFeatures>
<xcalcf:feature name="microsoft.com:RD" />
<xcalcf:feature name="microsoft.com:FV" />
</xcalcf:calcFeatures>
</ext>
</extLst>
</workbook>
`;//
const workbookXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId8" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml" />
<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet3.xml" />
<Relationship Id="rId7" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="theme/theme1.xml" />
<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet2.xml" />
<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml" />
<Relationship Id="rId6" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet6.xml" />
<Relationship Id="rId5" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet5.xml" />
<Relationship Id="rId4" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet4.xml" />
<Relationship Id="rId9" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings"
Target="sharedStrings.xml" />
</Relationships>
`;
const drawing1Data = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<xdr:wsDr xmlns:xdr="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
<xdr:twoCellAnchor editAs="oneCell">
<xdr:from>
<xdr:col>9</xdr:col>
<xdr:colOff>0</xdr:colOff>
<xdr:row>0</xdr:row>
<xdr:rowOff>161925</xdr:rowOff>
</xdr:from>
<xdr:to>
<xdr:col>15</xdr:col>
<xdr:colOff>542925</xdr:colOff>
<xdr:row>16</xdr:row>
<xdr:rowOff>38100</xdr:rowOff>
</xdr:to>
<xdr:pic>
<xdr:nvPicPr>
<xdr:cNvPr id="2" name="图片 1" descr="图1">
<a:extLst>
<a:ext uri="{FF2B5EF4-FFF2-40B4-BE49-F238E27FC236}">
<a16:creationId xmlns:a16="http://schemas.microsoft.com/office/drawing/2014/main" id="{B3254D43-B0F9-40B2-8D35-540241F52832}" />
</a:ext>
<a:ext uri="{00000000-0001-0000-0000-000000000000}">
<a16:creationId xmlns="" xmlns:a16="http://schemas.microsoft.com/office/drawing/2014/main" id="{00000000-0000-0000-0000-000000000000}" />
</a:ext>
</a:extLst>
</xdr:cNvPr>
<xdr:cNvPicPr>
<a:picLocks noChangeAspect="1" />
</xdr:cNvPicPr>
</xdr:nvPicPr>
<xdr:blipFill>
<a:blip xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:embed="rId1" />
<a:stretch>
<a:fillRect />
</a:stretch>
</xdr:blipFill>
<xdr:spPr>
<a:xfrm>
<a:off x="6172200" y="161925" />
<a:ext cx="4657725" cy="2771775" />
</a:xfrm>
<a:prstGeom prst="rect">
<a:avLst />
</a:prstGeom>
</xdr:spPr>
</xdr:pic>
<xdr:clientData />
</xdr:twoCellAnchor>
<xdr:twoCellAnchor editAs="oneCell">
<xdr:from>
<xdr:col>9</xdr:col>
<xdr:colOff>9525</xdr:colOff>
<xdr:row>18</xdr:row>
<xdr:rowOff>9525</xdr:rowOff>
</xdr:from>
<xdr:to>
<xdr:col>15</xdr:col>
<xdr:colOff>542925</xdr:colOff>
<xdr:row>33</xdr:row>
<xdr:rowOff>114300</xdr:rowOff>
</xdr:to>
<xdr:pic>
<xdr:nvPicPr>
<xdr:cNvPr id="3" name="图片 2" descr="图2">
<a:extLst>
<a:ext uri="{FF2B5EF4-FFF2-40B4-BE49-F238E27FC236}">
<a16:creationId xmlns:a16="http://schemas.microsoft.com/office/drawing/2014/main" id="{0E01A452-F190-4032-B5E1-45D5788F7B24}" />
</a:ext>
<a:ext uri="{00000000-0001-0000-0000-000000000000}">
<a16:creationId xmlns="" xmlns:a16="http://schemas.microsoft.com/office/drawing/2014/main" id="{00000000-0001-0000-0000-000000000000}" />
</a:ext>
</a:extLst>
</xdr:cNvPr>
<xdr:cNvPicPr>
<a:picLocks noChangeAspect="1" />
</xdr:cNvPicPr>
</xdr:nvPicPr>
<xdr:blipFill>
<a:blip xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:embed="rId2" />
<a:stretch>
<a:fillRect />
</a:stretch>
</xdr:blipFill>
<xdr:spPr>
<a:xfrm>
<a:off x="6181725" y="3267075" />
<a:ext cx="4648200" cy="2819400" />
</a:xfrm>
<a:prstGeom prst="rect">
<a:avLst />
</a:prstGeom>
</xdr:spPr>
</xdr:pic>
<xdr:clientData />
</xdr:twoCellAnchor>
</xdr:wsDr>
`;
const theme1Data = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Office 主题">
<a:themeElements>
<a:clrScheme name="Office">
<a:dk1>
<a:sysClr val="windowText" lastClr="000000" />
</a:dk1>
<a:lt1>
<a:sysClr val="window" lastClr="FFFFFF" />
</a:lt1>
<a:dk2>
<a:srgbClr val="44546A" />
</a:dk2>
<a:lt2>
<a:srgbClr val="E7E6E6" />
</a:lt2>
<a:accent1>
<a:srgbClr val="4472C4" />
</a:accent1>
<a:accent2>
<a:srgbClr val="ED7D31" />
</a:accent2>
<a:accent3>
<a:srgbClr val="A5A5A5" />
</a:accent3>
<a:accent4>
<a:srgbClr val="FFC000" />
</a:accent4>
<a:accent5>
<a:srgbClr val="5B9BD5" />
</a:accent5>
<a:accent6>
<a:srgbClr val="70AD47" />
</a:accent6>
<a:hlink>
<a:srgbClr val="0563C1" />
</a:hlink>
<a:folHlink>
<a:srgbClr val="954F72" />
</a:folHlink>
</a:clrScheme>
<a:fontScheme name="Office">
<a:majorFont>
<a:latin typeface="Calibri Light" panose="020F0302020204030204" />
<a:ea typeface="" />
<a:cs typeface="" />
<a:font script="Jpan" typeface="游ゴシック Light" />
<a:font script="Hang" typeface="맑은 고딕" />
<a:font script="Hans" typeface="等线 Light" />
<a:font script="Hant" typeface="新細明體" />
<a:font script="Arab" typeface="Times New Roman" />
<a:font script="Hebr" typeface="Times New Roman" />
<a:font script="Thai" typeface="Tahoma" />
<a:font script="Ethi" typeface="Nyala" />
<a:font script="Beng" typeface="Vrinda" />
<a:font script="Gujr" typeface="Shruti" />
<a:font script="Khmr" typeface="MoolBoran" />
<a:font script="Knda" typeface="Tunga" />
<a:font script="Guru" typeface="Raavi" />
<a:font script="Cans" typeface="Euphemia" />
<a:font script="Cher" typeface="Plantagenet Cherokee" />
<a:font script="Yiii" typeface="Microsoft Yi Baiti" />
<a:font script="Tibt" typeface="Microsoft Himalaya" />
<a:font script="Thaa" typeface="MV Boli" />
<a:font script="Deva" typeface="Mangal" />
<a:font script="Telu" typeface="Gautami" />
<a:font script="Taml" typeface="Latha" />
<a:font script="Syrc" typeface="Estrangelo Edessa" />
<a:font script="Orya" typeface="Kalinga" />
<a:font script="Mlym" typeface="Kartika" />
<a:font script="Laoo" typeface="DokChampa" />
<a:font script="Sinh" typeface="Iskoola Pota" />
<a:font script="Mong" typeface="*n Baiti" />
<a:font script="Viet" typeface="Times New Roman" />
<a:font script="Uigh" typeface="Microsoft Uighur" />
<a:font script="Geor" typeface="Sylfaen" />
<a:font script="Armn" typeface="Arial" />
<a:font script="Bugi" typeface="Leelawadee UI" />
<a:font script="Bopo" typeface="Microsoft JhengHei" />
<a:font script="Java" typeface="Javanese Text" />
<a:font script="Lisu" typeface="Segoe UI" />
<a:font script="Mymr" typeface="Myanmar Text" />
<a:font script="Nkoo" typeface="Ebrima" />
<a:font script="Olck" typeface="Nirmala UI" />
<a:font script="Osma" typeface="Ebrima" />
<a:font script="Phag" typeface="Phagspa" />
<a:font script="Syrn" typeface="Estrangelo Edessa" />
<a:font script="Syrj" typeface="Estrangelo Edessa" />
<a:font script="Syre" typeface="Estrangelo Edessa" />
<a:font script="Sora" typeface="Nirmala UI" />
<a:font script="Tale" typeface="Microsoft Tai Le" />
<a:font script="Talu" typeface="Microsoft New Tai Lue" />
<a:font script="Tfng" typeface="Ebrima" />
</a:majorFont>
<a:minorFont>
<a:latin typeface="Calibri" panose="020F0502020204030204" />
<a:ea typeface="" />
<a:cs typeface="" />
<a:font script="Jpan" typeface="游ゴシック" />
<a:font script="Hang" typeface="맑은 고딕" />
<a:font script="Hans" typeface="等线" />
<a:font script="Hant" typeface="新細明體" />
<a:font script="Arab" typeface="Arial" />
<a:font script="Hebr" typeface="Arial" />
<a:font script="Thai" typeface="Tahoma" />
<a:font script="Ethi" typeface="Nyala" />
<a:font script="Beng" typeface="Vrinda" />
<a:font script="Gujr" typeface="Shruti" />
<a:font script="Khmr" typeface="DaunPenh" />
<a:font script="Knda" typeface="Tunga" />
<a:font script="Guru" typeface="Raavi" />
<a:font script="Cans" typeface="Euphemia" />
<a:font script="Cher" typeface="Plantagenet Cherokee" />
<a:font script="Yiii" typeface="Microsoft Yi Baiti" />
<a:font script="Tibt" typeface="Microsoft Himalaya" />
<a:font script="Thaa" typeface="MV Boli" />
<a:font script="Deva" typeface="Mangal" />
<a:font script="Telu" typeface="Gautami" />
<a:font script="Taml" typeface="Latha" />
<a:font script="Syrc" typeface="Estrangelo Edessa" />
<a:font script="Orya" typeface="Kalinga" />
<a:font script="Mlym" typeface="Kartika" />
<a:font script="Laoo" typeface="DokChampa" />
<a:font script="Sinh" typeface="Iskoola Pota" />
<a:font script="Mong" typeface="*n Baiti" />
<a:font script="Viet" typeface="Arial" />
<a:font script="Uigh" typeface="Microsoft Uighur" />
<a:font script="Geor" typeface="Sylfaen" />
<a:font script="Armn" typeface="Arial" />
<a:font script="Bugi" typeface="Leelawadee UI" />
<a:font script="Bopo" typeface="Microsoft JhengHei" />
<a:font script="Java" typeface="Javanese Text" />
<a:font script="Lisu" typeface="Segoe UI" />
<a:font script="Mymr" typeface="Myanmar Text" />
<a:font script="Nkoo" typeface="Ebrima" />
<a:font script="Olck" typeface="Nirmala UI" />
<a:font script="Osma" typeface="Ebrima" />
<a:font script="Phag" typeface="Phagspa" />
<a:font script="Syrn" typeface="Estrangelo Edessa" />
<a:font script="Syrj" typeface="Estrangelo Edessa" />
<a:font script="Syre" typeface="Estrangelo Edessa" />
<a:font script="Sora" typeface="Nirmala UI" />
<a:font script="Tale" typeface="Microsoft Tai Le" />
<a:font script="Talu" typeface="Microsoft New Tai Lue" />
<a:font script="Tfng" typeface="Ebrima" />
</a:minorFont>
</a:fontScheme>
<a:fmtScheme name="Office">
<a:fillStyleLst>
<a:solidFill>
<a:schemeClr val="phClr" />
</a:solidFill>
<a:gradFill rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:schemeClr val="phClr">
<a:lumMod val="110000" />
<a:satMod val="105000" />
<a:tint val="67000" />
</a:schemeClr>
</a:gs>
<a:gs pos="50000">
<a:schemeClr val="phClr">
<a:lumMod val="105000" />
<a:satMod val="103000" />
<a:tint val="73000" />
</a:schemeClr>
</a:gs>
<a:gs pos="100000">
<a:schemeClr val="phClr">
<a:lumMod val="105000" />
<a:satMod val="109000" />
<a:tint val="81000" />
</a:schemeClr>
</a:gs>
</a:gsLst>
<a:lin ang="5400000" scaled="0" />
</a:gradFill>
<a:gradFill rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:schemeClr val="phClr">
<a:satMod val="103000" />
<a:lumMod val="102000" />
<a:tint val="94000" />
</a:schemeClr>
</a:gs>
<a:gs pos="50000">
<a:schemeClr val="phClr">
<a:satMod val="110000" />
<a:lumMod val="100000" />
<a:shade val="100000" />
</a:schemeClr>
</a:gs>
<a:gs pos="100000">
<a:schemeClr val="phClr">
<a:lumMod val="99000" />
<a:satMod val="120000" />
<a:shade val="78000" />
</a:schemeClr>
</a:gs>
</a:gsLst>
<a:lin ang="5400000" scaled="0" />
</a:gradFill>
</a:fillStyleLst>
<a:lnStyleLst>
<a:ln w="6350" cap="flat" cmpd="sng" algn="ctr">
<a:solidFill>
<a:schemeClr val="phClr" />
</a:solidFill>
<a:prstDash val="solid" />
<a:miter lim="800000" />
</a:ln>
<a:ln w="12700" cap="flat" cmpd="sng" algn="ctr">
<a:solidFill>
<a:schemeClr val="phClr" />
</a:solidFill>
<a:prstDash val="solid" />
<a:miter lim="800000" />
</a:ln>
<a:ln w="19050" cap="flat" cmpd="sng" algn="ctr">
<a:solidFill>
<a:schemeClr val="phClr" />
</a:solidFill>
<a:prstDash val="solid" />
<a:miter lim="800000" />
</a:ln>
</a:lnStyleLst>
<a:effectStyleLst>
<a:effectStyle>
<a:effectLst />
</a:effectStyle>
<a:effectStyle>
<a:effectLst />
</a:effectStyle>
<a:effectStyle>
<a:effectLst>
<a:outerShdw blurRad="57150" dist="19050" dir="5400000" algn="ctr" rotWithShape="0">
<a:srgbClr val="000000">
<a:alpha val="63000" />
</a:srgbClr>
</a:outerShdw>
</a:effectLst>
</a:effectStyle>
</a:effectStyleLst>
<a:bgFillStyleLst>
<a:solidFill>
<a:schemeClr val="phClr" />
</a:solidFill>
<a:solidFill>
<a:schemeClr val="phClr">
<a:tint val="95000" />
<a:satMod val="170000" />
</a:schemeClr>
</a:solidFill>
<a:gradFill rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:schemeClr val="phClr">
<a:tint val="93000" />
<a:satMod val="150000" />
<a:shade val="98000" />
<a:lumMod val="102000" />
</a:schemeClr>
</a:gs>
<a:gs pos="50000">
<a:schemeClr val="phClr">
<a:tint val="98000" />
<a:satMod val="130000" />
<a:shade val="90000" />
<a:lumMod val="103000" />
</a:schemeClr>
</a:gs>
<a:gs pos="100000">
<a:schemeClr val="phClr">
<a:shade val="63000" />
<a:satMod val="120000" />
</a:schemeClr>
</a:gs>
</a:gsLst>
<a:lin ang="5400000" scaled="0" />
</a:gradFill>
</a:bgFillStyleLst>
</a:fmtScheme>
</a:themeElements>
<a:objectDefaults />
<a:extraClrSchemeLst />
<a:extLst>
<a:ext uri="{05A4C25C-085E-4340-85A3-A5531E510DB2}">
<thm15:themeFamily xmlns:thm15="http://schemas.microsoft.com/office/thememl/2012/main" name="Office Theme" id="{62F939B6-93AF-4DB8-9C6B-D6C7DFDC589F}"
vid="{4A3C46E8-61CC-4603-A589-7422A47A8E4A}" />
</a:ext>
</a:extLst>
</a:theme>
`;
const sheet1Data = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac xr xr2 xr3" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac"
xmlns:xr="http://schemas.microsoft.com/office/spreadsheetml/2014/revision" xmlns:xr2="http://schemas.microsoft.com/office/spreadsheetml/2015/revision2"
xmlns:xr3="http://schemas.microsoft.com/office/spreadsheetml/2016/revision3" xr:uid="{21003895-7A4C-4232-A74B-BA9CB37E5275}">
`;
export {
Content_Types,
relsData,
appData,
coreData,
stylesData,
workbookData,
workbookXml,
drawing1Data,
theme1Data,
sheet1Data,
}
2.导出文件：
/* eslint-disable */
require('file-saver'); import JSZip from 'jszip'
import {
Content_Types,
relsData,
appData,
coreData,
stylesData,
workbookData,
workbookXml,
drawing1Data,
theme1Data,
sheet1Data,
} from './xlsxStyles' function make_app_data(chartData) {
let sheetCount = chartData.length;
let titleVtItems = '';
chartData.forEach((item,index)=>{
titleVtItems += `<vt:lpstr>`+item.name+`</vt:lpstr>`
}); return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes">
<Application>Microsoft Excel</Application>
<DocSecurity>0</DocSecurity>
<ScaleCrop>false</ScaleCrop>
<HeadingPairs>
<vt:vector size="2" baseType="variant">
<vt:variant>
<vt:lpstr>工作表</vt:lpstr>
</vt:variant>
<vt:variant>
<vt:i4>`+sheetCount+`</vt:i4>
</vt:variant>
</vt:vector>
</HeadingPairs>
<TitlesOfParts>
<vt:vector size="`+sheetCount+`" baseType="lpstr">
`
+ titleVtItems +
`
</vt:vector>
</TitlesOfParts>
<Company></Company>
<LinksUpToDate>false</LinksUpToDate>
<SharedDoc>false</SharedDoc>
<HyperlinksChanged>false</HyperlinksChanged>
<AppVersion>16.0300</AppVersion>
</Properties>
`;
} function make_workbook_data(chartData) {
let sheetItems = '';
chartData.forEach((item,index)=>{
let id = index + 1
sheetItems += `<sheet name="`+item.name+`" sheetId="`+id+`" r:id="rId`+id+`" />`;
});
return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x15 xr xr6 xr10 xr2" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"
xmlns:xr="http://schemas.microsoft.com/office/spreadsheetml/2014/revision" xmlns:xr6="http://schemas.microsoft.com/office/spreadsheetml/2016/revision6"
xmlns:xr10="http://schemas.microsoft.com/office/spreadsheetml/2016/revision10" xmlns:xr2="http://schemas.microsoft.com/office/spreadsheetml/2015/revision2">
<fileVersion appName="xl" lastEdited="7" lowestEdited="7" rupBuild="21328" />
<workbookPr defaultThemeVersion="166925" />
<mc:AlternateContent xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<mc:Choice Requires="x15">
<x15ac:absPath url="F:\桌面文档\Desktop\" xmlns:x15ac="http://schemas.microsoft.com/office/spreadsheetml/2010/11/ac" />
</mc:Choice>
</mc:AlternateContent>
<xr:revisionPtr revIDLastSave="0" documentId="13_ncr:1_{D386BEC6-9E8D-4A6C-9BC7-09EF2C7D6400}" xr6:coauthVersionLast="41"
xr6:coauthVersionMax="41" xr10:uidLastSave="{00000000-0000-0000-0000-000000000000}" />
<bookViews>
<workbookView xWindow="3675" yWindow="660" windowWidth="21600" windowHeight="11385" xr2:uid="{AB6A0709-83A4-4152-867C-37AB087503A3}" />
</bookViews>
<sheets>
`
+sheetItems+
`
</sheets>
<calcPr calcId="191029" />
<extLst>
<ext uri="{140A7094-0E35-4892-8432-C4D2E57EDEB5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main">
<x15:workbookPr chartTrackingRefBase="1" />
</ext>
<ext uri="{B58B0392-4F1F-4190-BB64-5DF3571DCE5F}" xmlns:xcalcf="http://schemas.microsoft.com/office/spreadsheetml/2018/calcfeatures">
<xcalcf:calcFeatures>
<xcalcf:feature name="microsoft.com:RD" />
<xcalcf:feature name="microsoft.com:FV" />
</xcalcf:calcFeatures>
</ext>
</extLst>
</workbook>
`;
} function make_workbook_xml(chartData) { let relationships = '';
chartData.forEach((item,index)=>{
let id = index + 1
relationships += `<Relationship Id="rId`+id+`" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet`+id+`.xml" />`;
}); return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
`
+relationships+
`
<Relationship Id="rId`+(chartData.length+1)+`" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="theme/theme1.xml" />
<Relationship Id="rId`+(chartData.length+2)+`" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml" />
<Relationship Id="rId`+(chartData.length+3)+`" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings"
Target="sharedStrings.xml" />
</Relationships>
`;
} export function export_txt_to_zip(imgData, chartData ,xlsxName) {
// console.log(imgData,"图形");
// console.log(chartData ,"数据");
const zip = new JSZip();
const zip_name = xlsxName || 'excel文档'; // 第一层文件夹：
const _rels = zip.folder("_rels");
const docProps = zip.folder("docProps");//app.xml core.xml custom.xml
const xl = zip.folder("xl"); // sharedStrings.xml styles.xml workbook.xml // 第二层文件夹：
const xl_rels = xl.folder("_rels");
const media = xl.folder("media"); //图片2*6=12
const theme = xl.folder("theme");// theme1.xml
const drawings = xl.folder("drawings"); // 【1个关系文件夹+数据文件6个】
const worksheets = xl.folder("worksheets"); // 【1个关系文件夹+数据文件6个】 // 第三层文件夹：
const drawings_xl_rels = drawings.folder("_rels");
const sheets_xl_rels = worksheets.folder("_rels");//可以不需要关系文档 // 文件内容
//【1】
zip.file(`[Content_Types].xml`, Content_Types);
//【2】
_rels.file(`.rels`, relsData);
//【3】
docProps.file(`app.xml`, make_app_data(chartData));
//【4】
docProps.file(`core.xml`, coreData);
//【5】
// docProps.file(`custom.xml`, customData);
//【6】
xl_rels.file(`workbook.xml.rels`, make_workbook_xml(chartData));
//【7】
xl.file(`workbook.xml`, make_workbook_data(chartData));
//【8】样式
xl.file(`styles.xml`, stylesData);
//【9】主题
theme.file(`theme1.xml`, theme1Data);
//【10】数据
let sharedStringsData = `` //共享数据
//参数
let num = 0 // 图片文件标记
let rowNum = 0;//共享数据标记
chartData.forEach((item,index)=>{
let sheetData = sheet1Data //模板
// 计算参数
const maxLenArr = item.data.map(v=>v.length)
const maxLen = Math.max(...maxLenArr)
const dataLen = item.data.length
const dimension = String.fromCharCode(65 + maxLen-1) + String(dataLen)
// 遍历数据
sheetData += `
<dimension ref="A1:${dimension}" />
<sheetViews>
<sheetView ${index===0?'tabSelected="1"':''} workbookViewId="0" />
</sheetViews>
<sheetFormatPr defaultColWidth="9" defaultRowHeight="14.25" x14ac:dyDescent="0.2" />
<sheetData>`;
let row = 0;
item.data.forEach((val)=>{//字符串区分：纯数字与其它
row++
sheetData += `<row r="${row}" spans="1:${maxLen}" x14ac:dyDescent="0.2">`;//第1行开始,每行条数
val.forEach((v,i)=>{
const newVal = String(v).replace(/-/g, '').replace(/</g, '(').replace(/>/g, ')') //去除横杆(减号)+转换尖括号（大于小于号）
const abc = String.fromCharCode(65+i)+String(row)
var reg = /^[0-9]+.?[0-9]*$/
if (reg.test(v)) {
sheetData += `<c r="${abc}" s="1"><v>${+v}</v></c>`;//数字
}else{ // 非纯数字：需要单独存储
sheetData += `<c r="${abc}" s="2" t="s"><v>${rowNum}</v></c>`;
sharedStringsData += `<si><t>${newVal}</t></si>`;
rowNum++
}
})
sheetData += `</row>`;
})
sheetData += `</sheetData>
<phoneticPr fontId="1" type="noConversion" />
<pageMargins left="0.7" right="0.7" top="0.75" bottom="0.75" header="0.3" footer="0.3" />
<drawing r:id="rId1" />
</worksheet>`
worksheets.file(`sheet${index+1}.xml`, sheetData);//1.
//2.动态模板
let sheet_xml_rels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/drawing" Target="../drawings/drawing${index+1}.xml" />
</Relationships>`
sheets_xl_rels.file(`sheet${index+1}.xml.rels`, sheet_xml_rels);
//3.固定模板
let drawingData = drawing1Data
drawings.file(`drawing${index+1}.xml`, drawingData);
//4.动态模板
let drawing_xml_rels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="../media/image${2*index+2}.png" />
<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="../media/image${2*index+1}.png" />
</Relationships>
`
drawings_xl_rels.file(`drawing${index+1}.xml.rels`, drawing_xml_rels);
//图片
imgData[index][0].forEach((v,i)=>{
num++
media.file(`image${num}.png`, v, {base64: true});
})
})
//共享数据
let sharedStrings = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<sst xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" count="${rowNum}" uniqueCount="${rowNum}">
`;
sharedStrings += sharedStringsData;
sharedStrings +=`</sst>`;
xl.file(`sharedStrings.xml`, sharedStrings);
// 导出文件
zip.generateAsync({type:"blob"}).then((blob) => {
saveAs(blob, `${zip_name}.xlsx`)
}, (err) => {
alert('导出失败')
})
}
-end-
导出带图片的Excel——OOXML文件分析的更多相关文章
-
freemarker导出带图片的word文档
最近做一个关于文档导出功能, 顺便学习了下freemarker,做了个关于导出带图片的word文档,模板并没有写全,只是验证代码的正确性 这只是做一个小功能,故只做了后台代码关于导出的代码,并未与前台 ...
-
Laravel Excel模板导出-带图片
Laravel Excel版本 3.1 1.数据准备 建个2个表,加点数据,控制器中查数据,给模板使用. 表1-order:id, order_no, img_path, note 表2-order_ ...
-
实现打印级别且带图片的Excel 方案
导出二维数据excel,其实很简单,使用cvs就可以了.但是如果导出格式复杂带样式还带图片的怎么办?客户的要求有时就是这么变态.呵呵.如果使用.net,微软提供的有库,使用php好像也有现成的有库.我 ...
-
导出包含图片的excel、word、pdf 笔记
/** * 导出word * @throws Exception */ @Override public byte[] WordExport( List<VbLibGlobalAnalyList ...
-
java 导出blob图片到excel
实现功能,导出当前页面显示员工的图片,核心代码已给出,仅供参考, 如需转载请注明出处http://www.cnblogs.com/wangjianguang/p/7852060.html 随便再扯2句 ...
-
POI导出带格式的Excel模板——（六）
Jar包
-
Freemarker导出带图片的word
1.新建一doc文档
-
form提交(图片，excel其他文件)
HTML表单需要设置enctype="multipart/form-data"这个属性,如果不这么设置,在提交表单时候,相关文件将无法获取. HTML表单如何打包数据文件是由enc ...
-
导出带有图片的excel
public static void main(String[] args) { try { FileOutputStream out = new FileOutputStream("d:\ ...
随机推荐
-
Entity Framework 迁移命令 详解
一.Entity Framework 迁移命令(get-help EntityFramework) Enable-Migrations 启用迁移 Add-Migration 为挂起的Model变化添加 ...
-
解决Eclipse Debug 的source not found问题
最近在做Android 4.4系统的定制开发(RockIII)进行Debug时,并打上断点,运行到断点处时,Debug窗口出现source not found问题(没有自动关联程序编码): 解决办法: ...
-
Sping中的事务配置
关于Spring的事务配置,主要的配置文件如下(使用了C3P0连接池): <?xml version="1.0" encoding="UTF-8"?> ...
-
Java 集合源码解析（2）：ListIterator
点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情和股票一样红,还是学学 ListIterator 吧! ListIterator 根据官方文档介绍, ListIt ...
-
lPC1788驱动SDRAM
Sdram型号为hy57v256 #ifndef __SRAM_H_ #define __SRAM_H_ #include "common.h" #include "de ...
-
python爬虫--爬取某网站电影下载地址
前言:因为自己还是python世界的一名小学生,还有很多路要走,所以本文以目的为向导,达到目的即可,对于那些我自己都没弄懂的原理,不做去做过多解释,以免误人子弟,大家可以网上搜索. 友情提示:本代码用 ...
-
Swift中方法闭包参数不能省略括号的一种情况
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道在swift中,如果方法的最后一个参数是一个闭包类型, ...
-
SSM框架中如何简便上传文件表单
此种方式上传文件相对简单,以下均经测试成功,才提供到此. 以下为单个文件上传方式 分析:本次的工作目的是根据一级标题产生对应的二级标题,在每个二级标题下对应一个(file字段)新闻文件,当点击新闻文件 ...
-
Android之密码的显示与隐藏
很多应用都是显示与隐藏密码的功能. 之前的项目都没这个功能要求,也没有专门研究这个.最近项目有加这个功能,我这里也刚好整理一下. 我的思路是设置EditText的InputType.代码如下: if ...
-
centos 7 安装 BeautifulSoup 和requests
安装beautifulsoup wget https://www.crummy.com/software/BeautifulSoup/bs4/download/4.5/beautifulsoup4-4 ...