前端导出excel实例（a.download只兼容chrome，不兼容safari）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014744118/article/details/83095185

1、导出表格数据

import $ from 'jquery';
import moment from 'moment';
import store from '../../store';
export const exportExcel = (pageCode, product, activeKey) => {
    const csrData = store.getState().csr_new;
    console.log('0')
    let table = $('<table></table>');
    table.append($('.w-table-thead').html()).append('<tbody></tbody>');
    switch (pageCode) {
        case 'lmeHolding':
            if (csrData.lmeReducer.lmeTable.result == 0) {
                const lmeData = csrData.lmeReducer.lmeTable.contents;
                lmeData.sort((x, y) => {
                    return y.d - x.d
                });
                $.each(lmeData, function (index, value) {
                    if (!value.v.com_moreholding) {
                        return true;
                    }
                    let tr = $(`<tr><td style="text-align:center" x:str="'${moment(value.d.toString()).format('YYYY/MM/DD')}">${moment(value.d.toString()).format('YYYY/MM/DD')}</td><td>${value.v.com_moreholding}</td><td>${value.v.com_emptyholding}</td>
                                <td>${value.v.bu_holding}</td><td>${value.v.bu_emptyholding}</td>
                                <td>${value.v.ot_holding}</td><td>${value.v.ot_emptyholding}</td><td>${value.v.ca_holding}</td>
                                <td>${value.v.ca_emptyholding}</td></tr>`);
                    table.find('tbody').append(tr);
                });
            }
            saveFile(table, `LME${product}持仓明细`);
            break;
        case 'lmeRatio':
            if (csrData.lmeReducer.lmeRatio.result == 0) {
                const lmeData = csrData.lmeReducer.lmeRatio.contents;
                lmeData.sort((x, y) => {
                    return y.d - x.d
                });
                $.each(lmeData, function (index, value) {
                    if (!value.v.com_moreratio) {
                        return true;
                    }
                    let tr = $(`<tr><td style="text-align:center" x:str="'${moment(value.d.toString()).format('YYYY/MM/DD')}">${moment(value.d.toString()).format('YYYY/MM/DD')}</td>
                                <td>${value.v.com_moreratio}</td><td>${value.v.com_emptyratio}</td>
                                <td>${value.v.bu_holdratio}</td><td>${value.v.bu_emptyratio}</td>
                                <td>${value.v.ot_holdratio}</td><td>${value.v.ot_emptyratio}</td><td>${value.v.ca_holdratio}</td>
                                <td>${value.v.ca_emptyratio}</td></tr>`);
                    table.find('tbody').append(tr);
                });
            }
            saveFile(table, `LME${product}占比明细`);
            break;
        case 'cftcHolding':
            if (activeKey == '1') {
                if (csrData.cftcReducer.holdingOld.result == 0) {
                    const lmeData = csrData.cftcReducer.holdingOld.contents;
                    lmeData.sort((x, y) => {
                        return y.d - x.d
                    });
                    $.each(lmeData, function (index, value) {
                        if (!value.v.bf_moreholding) {
                            return true;
                        }
                        let tr = $(`<tr><td style="text-align:center" x:str="'${moment(value.d.toString()).format('YYYY/MM/DD')}">${moment(value.d.toString()).format('YYYY/MM/DD')}</td>
                                <td>${value.v.bf_moreholding}</td><td>${value.v.bf_emptyholding}</td><td>${value.v.bf_arbitrage}</td><td>${value.v.bf_netholding}</td>
                                <td>${value.v.bs_moreholding}</td><td>${value.v.bs_emptyholding}</td>
                                <td>${value.v.bs_netholding}</td><td>${value.v.f_moreholding}</td><td>${value.v.f_emptyholding}</td>
                                <td>${value.v.f_netholding}</td><td>${value.v.b_totalholding}</td></tr>`);
                        table.find('tbody').append(tr);
                    });
                }
                saveFile(table, `${product}CFTC持仓`);
            } else {
                if (csrData.cftcReducer.holdingNew.result == 0) {
                    const lmeData = csrData.cftcReducer.holdingNew.contents;
                    lmeData.sort((x, y) => {
                        return y.d - x.d
                    });
                    $.each(lmeData, function (index, value) {
                        if (!value.v.g_moreholding) {
                            return true;
                        }
                        let tr = $(`<tr><td style="text-align:center" x:str="'${moment(value.d.toString()).format('YYYY/MM/DD')}">${moment(value.d.toString()).format('YYYY/MM/DD')}</td>
                                <td>${value.v.g_moreholding}</td><td>${value.v.g_emptyholding}</td><td>${value.v.g_arbitrageholding}</td><td>${value.v.g_netholding}</td>
                                <td>${value.v.s_moreholding}</td><td>${value.v.s_emptyholding}</td>
                                <td>${value.v.s_netholding}</td><td>${value.v.f_moreholding}</td><td>${value.v.f_emptyholding}</td>
                                <td>${value.v.f_netholding}</td><td>${value.v.holding}</td></tr>`);
                        table.find('tbody').append(tr);
                    });
                }
                saveFile(table, `${product}CFTC持仓(新)`);
            }
            break;
        case 'cftcRatio':
            if (activeKey == '1') {
                if (csrData.cftcReducer.ratioOld.result == 0) {
                    const lmeData = csrData.cftcReducer.ratioOld.contents;
                    lmeData.sort((x, y) => {
                        return y.d - x.d
                    });
                    $.each(lmeData, function (index, value) {
                        if (!value.v.z_moreratio_4) {
                            return true;
                        }
                        let tr = $(`<tr><td style="text-align:center" x:str="'${moment(value.d.toString()).format('YYYY/MM/DD')}">${moment(value.d.toString()).format('YYYY/MM/DD')}</td>
                                <td>${value.v.z_moreratio_4}</td><td>${value.v.z_emptyratio_4}</td><td>${value.v.z_moreratio_8}</td><td>${value.v.z_emptyratio_8}</td>
                                <td>${value.v.j_moreratio_4}</td><td>${value.v.j_emptyratio_4}</td>
                                <td>${value.v.j_moreratio_8}</td><td>${value.v.j_emptyratio_8}</td></tr>`);
                        table.find('tbody').append(tr);
                    });
                }
                saveFile(table, `${product}CFTC占比`);
            } else {
                if (csrData.cftcReducer.ratioNew.result == 0) {
                    const lmeData = csrData.cftcReducer.ratioNew.contents;
                    lmeData.sort((x, y) => {
                        return y.d - x.d
                    });
                    $.each(lmeData, function (index, value) {
                        if (!value.v.g_moreratio) {
                            return true;
                        }
                        let tr = $(`<tr><td style="text-align:center" x:str="'${moment(value.d.toString()).format('YYYY/MM/DD')}">${moment(value.d.toString()).format('YYYY/MM/DD')}</td>
                                <td>${value.v.g_moreratio}</td><td>${value.v.g_emptyratio}</td><td>${value.v.g_arbitrageratio}</td><td>${value.v.g_netratio}</td>
                                <td>${value.v.s_moreratio}</td><td>${value.v.s_emptyratio}</td>
                                <td>${value.v.s_netratio}</td><td>${value.v.f_moreratio}</td><td>${value.v.f_emptyratio}</td></tr>`);
                        table.find('tbody').append(tr);
                    });
                }
                saveFile(table, `${product}CFTC占比(新)`);
            }
            break;
        case 'plateShow':
            saveFile($('.w-tabs-tabpane-active table'), product);
            break;
        case 'variety':
            saveFile($('.w-table-content table'), product);
            break;
        default:
            break;
    }
}

const saveFile = function ($el, fileName) {
    var urlObject = window.URL || window.webkitURL || window;
    var exportBlob = new Blob([excelTemplate($el,fileName)]);
    var saveLink = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    saveLink.href = urlObject.createObjectURL(exportBlob);
    saveLink.download = fileName.toUpperCase() + '.xls';
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    saveLink.dispatchEvent(ev);
    urlObject.revokeObjectURL(saveLink.href);
}

const excelTemplate = (tagArr,fileName) => {
    let sheetsInfo = "",
        sheetsDate = "",
        picsDate = "";
    Array.from(tagArr).map((value, index) => {
        let table, sheetname;
        if (value.tagName === 'TABLE') {
            if ($('.w-tabs-tabpane-active').length == 0) {
                sheetname = $('.w-table-title').text();
                if(!sheetname){
                    sheetname=fileName;
                }
            } else {
                sheetname = $('.w-tabs-tab-active span').text()
            }
            table = value.outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
        } else {
            // const option = getChartData(value);
            // const canvas = value.getElementsByTagName('canvas')[0];
            // table = getChartTable(option, index, pagecode).outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
            // if (option.title) {
            //     sheetname = option.title;
            // } else {
            //     sheetname = document.getElementsByClassName('w-card-head-title')[0].textContent + index;
            // }
            // let picInfo = value.getElementsByTagName('canvas')[0].toDataURL(['image/png', 1]).slice(22);
            // let picDate = '\r\n' +
            //     '\r\n------WIND----' +
            //     '\r\nContent-Transfer-Encoding: base64' +
            //     '\r\nContent-Location: file:///C:/MimeExcel/picture' + index +
            //     '\r\nContent-Type: image/png' +
            //     '\r\n' +
            //     '\r\n' + picInfo;
            // picsDate = picsDate + picDate
        }
        // 单页头信息
        let sheetInfo = '\r\n<x:ExcelWorksheet>' +
            '\r\n<x:Name>' + sheetname + '</x:Name>' +
            '\r\n<x:WorksheetSource HRef=3D"MimeExcel/sheet' + index + '"/>' +
            '\r\n</x:ExcelWorksheet>';

        //单页数据信息
        let sheetDate = '\r\n' +
            '\r\n------WIND----' +
            '\r\nContent-Location: file:///C:/MimeExcel/sheet' + index +
            '\r\nContent-Transfer-Encoding: quoted-printable' +
            '\r\nContent-Type: text/html; charset="utf-8"' +
            '\r\n' +
            '\r\n<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">' +
            '\r\n' +
            '\r\n<head>' +
            '\r\n <meta http-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8">' +
            '\r\n<xml>' +
            '\r\n<x:WorksheetOptions>' +
            '\r\n<x:ProtectContents>False</x:ProtectContents>' +
            '\r\n<x:ProtectObjects>False</x:ProtectObjects>' +
            '\r\n<x:ProtectScenarios>False</x:ProtectScenarios>' +
            '\r\n</x:WorksheetOptions>' +
            '\r\n</xml>' +
            '\r\n</head>' +
            '\r\n<body>' +
            '\r\n<table style=3D"width: 1000px">' +
            table +
            '\r\n</table>' +
            '\r\n</body>' +
            '\r\n</html>'
        //组合成多页
        sheetsInfo = sheetsInfo + sheetInfo;
        sheetsDate = sheetsDate + sheetDate;
    });
    //MIME框架模板
    let template = 'MIME-Version: 1.0' +
        '\r\nX-Document-Type: Workbook' +
        '\r\nContent-Type: multipart/related; boundary="----WIND----"' +
        '\r\n' +
        '\r\n------WIND----' +
        '\r\nContent-Location: file:///C:/MimeExcel.xml' +
        '\r\nContent-Transfer-Encoding: quoted-printable' +
        '\r\nContent-Type: text/html; charset="utf-8"' +
        '\r\n' +
        '\r\n<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">' +
        '\r\n' +
        '\r\n<head>' +
        '\r\n <meta http-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8">' +
        '\r\n  <xml>' +
        '\r\n   <x:ExcelWorkbook>' +
        '\r\n    <x:ExcelWorksheets>' +
        sheetsInfo +
        '\r\n    </x:ExcelWorksheets>' +
        '\r\n   </x:ExcelWorkbook>' +
        '\r\n  </xml>' +
        '\r\n</head>' +
        '\r\n</html>' +
        sheetsDate +
        picsDate +
        '\r\n' +
        '\r\n------WIND------';
    return template;
}

2、导出图形并且导出图形外数据

import $ from 'jquery';
import echarts from 'echarts';
import store from '../../store';
import moment from 'moment';
import { getQueryString, NumberFormat, convertThousands } from '../../utils/commonLib';
import {MIMETemplate, sheetTemplate, picTemplate, headerTemplate} from '../../utils/exportExcel';

export const exportExcel = (fName) => {
    let $container = document.querySelectorAll('.echarts-for-react');
    saveFile($container, fName);
}

const findS3 = (tData, index, s3) => {
    let res = '';
    if (!s3 && s3 !== 0) {
        for (let j = index, l = index + 28; j < l; ++j) {
            if (tData[j].v && tData[j].v.S3) {
                res = tData[j].v.S3;
                break;
            }
        }
    }
    return res;
}

const saveFile = function ($el, fileName) {
    let urlObject = window.URL || window.webkitURL || window;
    let exportBlob = new Blob([excelTemplate($el, fileName)]);
    let saveLink = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    saveLink.href = urlObject.createObjectURL(exportBlob);
    saveLink.download = fileName.toUpperCase() + '.xls';
    let ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    saveLink.dispatchEvent(ev);
    urlObject.revokeObjectURL(saveLink.href);
}

const excelTemplate = (tagArr, fileName) => {
    let sheetsInfo = "",
        sheetsDate = "",
        picsDate = "";
    Array.from(tagArr).map((value, index) => {
        let table, sheetname;
        if (value.tagName === 'TABLE') {
            // if ($('.w-tabs-tabpane-active').length == 0) {
            //     sheetname = $('.w-table-title').text();
            //     if (!sheetname) {
            //         sheetname = fileName;
            //     }
            // } else {
            //     sheetname = $('.w-tabs-tab-active span').text()
            // }
            // table = value.outerHTML.replace(/=/g, '=3D').replace(/null/g, '');

        } else {
            const option = getChartData(value, fileName);
            const canvas = value.getElementsByTagName('canvas')[0];
            table = getChartTable(option, index).outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
            option.title = fileName;
            if (option.title) {
                sheetname = option.title;
            } else {
                sheetname = document.getElementsByClassName('w-card-head-title')[0].textContent + index;
            }
            let picInfo = value.getElementsByTagName('canvas')[0].toDataURL(['image/png', 1]).slice(22);
            let picDate = picTemplate(index, picInfo);
            picsDate = picsDate + picDate;
        }
        // 单页头信息
        let sheetInfo = headerTemplate(sheetname, index);
        //单页数据信息
        let sheetDate = sheetTemplate(index, table);
        //组合成多页
        sheetsInfo = sheetsInfo + sheetInfo;
        sheetsDate = sheetsDate + sheetDate;
    });
    //MIME框架模板
    let template = MIMETemplate(sheetsInfo, sheetsDate, picsDate);
    return template;
}
/**
 * 获取echarts配置
 * @param {element} chartsDiv echarts所在DIV
 */
const getChartData = (chartsDiv, fileName) => {
    let option = {};
    let myChart = echarts.init(chartsDiv);
    let chartOption = myChart.getOption();
    if (chartOption) {
        option.title = fileName;
        option.xAxisData = chartOption.xAxis[0].data;
        option.series = [];
        chartOption.series.map((value) => {
            let seriesData = {};
            seriesData.name = value.name;
            seriesData.data = value.data;
            option.series.push(seriesData);
        });
    } else {
        option = null;
    }
    return option;
};


const getChartTable = (option, picIndex) => {
    const tableData = store.getState().mindMap.echartsData.contents;
    const mindmapConfig = store.getState().mindMap.echartsConfig.contents[0].jsonDef;
    let tableOption = mindmapConfig.tableOption;
    let table = document.createElement('table');
    table.innerHTML = `<thead><tr style="height:450px"><td colspan="20"><img src="picture${picIndex}"/></td></tr><tr class="series"><th>日期</th></tr></thead><tbody></tbody>`;  
    for(let item in tableOption){
        let th = document.createElement('th');
        th.innerText = tableOption[item].title;
        table.getElementsByClassName('series')[0].appendChild(th);
    }
    let t = document.createElement('tbody');
    let dataParam = mindmapConfig.dataParam;
    let frequency = 'month';
    if(mindmapConfig.tabOptions.itemOption[0].optionName != "当月"){
        frequency = 'day';
    }
    
    tableData.sort((a, b) => {
        return b.d.toString() - a.d.toString();
    });
    //change frequency...
    let _findS3 = (tdata, index, value) => {
        let _s3 = value;
        let monthDay = moment(tableData[index].d.toString().substring(0, 6), "YYYYMM").daysInMonth();
        if (!_s3) {
            for (let k = index; k < index + monthDay; ++k) {
                if (tableData[k].v.S3) {
                    _s3 = tableData[k].v.S3;
                    break;
                }
            }
        }
        return _s3;
    }

    let _getDateFormat = (datestr, frequency) => {
        let res = '';
        switch (frequency) {
            case 'month':
            case 'quarter':
                res = moment(datestr).format("YYYY/MM");
                break;
            case 'week':
            case 'day':
                res = moment(datestr).format("YYYY/MM/DD");
                break;
            default:
                res = moment(datestr).format("YYYY/MM");
        }
        return res;
    }

    if (tableData.length > 0) {
        let date = '',
            s3 = 0,
            len = tableData.length,
            cday = moment().subtract('5', 'years').format("YYYYMMDD");
        let _getPrevious = (passtableData) => {
            let j = 0,
                previous = 0;
            for (j = 0; j < len - 1; ++j) {
                if (passtableData[j].d < cday) {
                    break;
                }
            }
            return j;
        }
        let tableOptionFlag = mindmapConfig.tabOptions.itemOption.length === 2 ? true : false;
        let it = [];
        let _saveTableData = (P1, cloudFlag, P2, P3) => {
            let frequency = store.getState().mindMap.frequency.toLowerCase();
            if (!P2) {
                if (cloudFlag) { //
                    let j = 0,
                        previous = 0;
                    j = _getPrevious(tableData);
                    previous = tableData[j + 1].v[P1];
                    if(P3){
                        for (let i = 0; i < j; ++i) {
                            it = tableData[i].v;
                            if (it[P1] && tableData[i + 1].v[P1]) {
                                s3 = _findS3(tableData, i, it.S3);
                                let tr = document.createElement('tr');
                                date = _getDateFormat(tableData[i].d.toString(), frequency);
                                tr.innerHTML = `<td x:str="${date}" style="text-align:center" >${date}</td><td>${it[P1]}</td><td>${it[P1] - tableData[i + 1].v[P1]}</td><td>${convertThousands(s3)}</td>`;
                                t.appendChild(tr);
                            }
                        }
                        if(tableData[j].v[P1] && previous){
                            let tr = document.createElement('tr');
                            date = _getDateFormat(tableData[j].d.toString(), frequency);
                            tr.innerHTML = `<td x:str="${date}" style="text-align:center" >${date}</td><td>${convertThousands(tableData[j].v[P1])}</td><td>${tableData[j].v[P1] - previous}</td><td>${convertThousands(s3)}</td>`;
                            t.appendChild(tr);
                        }
                        
                    }else{
                        for (let i = 0; i < j; ++i) {
                            it = tableData[i].v;
                            if (it[P1] && tableData[i + 1].v && tableData[i + 1].v[P1]) {
                                s3 = _findS3(tableData, i, it.S3);
                                let tr = document.createElement('tr');
                                date = _getDateFormat(tableData[i].d.toString(), frequency);
                                tr.innerHTML = `<td  x:str="${date}" style="text-align:center" >${date}</td><td>${convertThousands(it[P1])}</td><td>${NumberFormat((it[P1] - tableData[i + 1].v[P1]) / Math.abs(tableData[i + 1].v[P1]) * 100, 2)}</td><td>${convertThousands(s3)}</td>`;
                                t.appendChild(tr);
                            }
                        }
                        if(tableData[j].v[P1] && previous){
                            let tr = document.createElement('tr');
                            date = _getDateFormat(tableData[j].d.toString(), frequency);
                            tr.innerHTML = `<td x:str="${date}" style="text-align:center" >${date}</td><td>${convertThousands(tableData[j].v[P1])}</td><td>${NumberFormat((tableData[j].v[P1] - previous) / Math.abs(previous) * 100, 2)}</td><td>${convertThousands(s3)}</td>`;
                            t.appendChild(tr);
                        }
                    }
                } else {//edb
                    if(tableOptionFlag){//有四列
                        tableData.map((items, index) => {
                            it = items.v;
                            if (it[P1]) {
                                s3 = _findS3(tableData, index, it.S3);
                                date = _getDateFormat(items.d.toString(), frequency);
                                let tr = document.createElement('tr');
                                tr.innerHTML = `<td x:str="${date}" style="text-align:center" >${date}</td><td>${convertThousands(it[P1])}</td><td>${it.S2?it.S2:''}</td><td>${convertThousands(s3)}</td>`;
                                t.appendChild(tr);
                            }
                        });
                    }else{//只有三列
                        tableData.map((items, index) => {
                            it = items.v;
                            if (it[P1]) {
                                s3 = _findS3(tableData, index, it.S3);
                                date = _getDateFormat(items.d.toString(), frequency);
                                let tr = document.createElement('tr');
                                tr.innerHTML = `<td x:str="${date}" style="text-align:center" >${date}</td><td>${convertThousands(it[P1])}</td><td>${convertThousands(s3)}</td>`;
                                t.appendChild(tr);
                            }
                        });
                    }
                }
            } else {//前五大持仓
                let j = 0,
                    previous = 0;
                j = _getPrevious(tableData);
                previous = tableData[j + 1].v[P1];
                let netHolding = 0;
                let previousNetHolding = 0;
                for (let i = 0; i < j; ++i) {
                    it = tableData[i].v;
                    if (it[P1] && it[P2] && tableData[i + 1].v[P1] && tableData[i + 1].v[P2]) {
                        s3 = _findS3(tableData, i, it.S3);
                        date = _getDateFormat(tableData[i].d.toString(), frequency);
                        netHolding = it[P1] - it[P2];
                        previousNetHolding = tableData[i + 1].v[P1] - tableData[i + 1].v[P2];
                        let tr = document.createElement('tr');
                        tr.innerHTML = `<td x:str="${date}" style="text-align:center" >${date}</td><td>${convertThousands(netHolding)}</td><td>${NumberFormat((netHolding - previousNetHolding) / Math.abs(previousNetHolding) * 100, 2)}</td><td>${convertThousands(s3)}</td>`;
                        t.appendChild(tr);
                    }
                }
                if(tableData[j].v[P1] && tableData[j].v[P2] && tableData[j + 1].v[P1] - tableData[j + 1].v[P2]){
                    netHolding = tableData[j].v[P1] - tableData[j].v[P2];
                    previousNetHolding = tableData[j + 1].v[P1] - tableData[j + 1].v[P2];
                    let tr = document.createElement('tr');
                    date = _getDateFormat(tableData[j].d.toString(), frequency);
                    tr.innerHTML = `<td x:str="${date}" style="text-align:center">${date}</td><td>${convertThousands(netHolding)}</td><td>${NumberFormat((netHolding - previousNetHolding) / Math.abs(previousNetHolding) * 100, 2)}</td><td>${convertThousands(s3)}</td>`;
                    t.appendChild(tr);
                }
            }
        };

        let dataParams = mindmapConfig.dataParam;
        if (dataParams.edb && dataParams.cloud) { //cloud & edb request
            let cid = dataParams.cloud[0].id;
            if (cid === 'f.cf.pp2.nh') { 
                _saveTableData("S1._moreHolding", true, "S1._emptyHolding");
            } else if (cid === 'f.cf.pp.sd') { 
                _saveTableData("S1._speculation_degree", true, '', true);
            } else if (cid === 'f.cf.pp.ha') { 
                _saveTableData("S1._holding_amount", true, '');
            } else {
                throw new Error("错误请求cloud id=" + cid);
            }
        } else {
            _saveTableData("S1", false, '');
        }
    }
    let arr = Array.from(t.querySelectorAll('tr'));
    arr.map((v, i) => {
        table.querySelectorAll('tbody')[0].appendChild(v);
    });
    return table;
};

3、导出echarts图形和图形数据

import echarts from 'echarts';
import store from '../../store';
import OptionGrid from '../../routes/f9.option/options/optionGrid';
import moment from 'moment';

let storeDate;
let pageCode;
window.ExportExcel = () => {
    let tagDOM = [];
    storeDate = store.getState();
    let fileName;
    if (window.location.href.indexOf('contractInfo') >= 0) {
        if (storeDate.optionInfoReducer.contractmonth) {
            tagDOM.push(getMonthTable(storeDate.optionInfoReducer.contractmonth))
        }
        Array.from(document.getElementsByClassName('special')).map((v, i) => {
            tagDOM.push(v);
        });
        fileName = '合约简介';
    } else {
        const search = window.location.href.split('?')[1];
        pageCode = getQueryString(search).pagecode;
        fileName = mappingFlieName[pageCode];
        switch (pageCode) {
            case 'cr':
            case 'chr':
            case 'cvr':
                let table = document.createElement('div');
                table.setAttribute('class', 'table');
                Array.from(document.getElementsByClassName('w-table')).map((v, i) => {
                    const title = v.getElementsByClassName('w-table-title')[0].textContent;
                    let caption = document.createElement('caption');
                    caption.innerText = title;
                    let tb = v.getElementsByTagName('table')[0].cloneNode(true);
                    Array.from(tb.querySelectorAll('a')).map((v, i) => {
                        v.removeAttribute('href');
                    });
                    tb.appendChild(caption);
                    table.innerHTML += tb.outerHTML;
                });
                tagDOM.push(table);
                break;
            case 'hv':
            case 'iv':
            case 'ivs':
                tagDOM = document.querySelectorAll('.echarts-for-react');
                break;

            case 'atm':
            case 'tpad':
            case 'tofb':
            case 'ths':
            case 'vcpp':
            case 'hcpp':
                tagDOM = document.getElementsByClassName('echarts-for-react');
                Array.from(tagDOM).map((v, i) => {
                    v.setAttribute('sp', 'spEcharts')
                });
                break;

            case 'vr':
            case 'hr':
            case 'hvc':
                tagDOM = document.getElementsByClassName('echarts-for-react');
                Array.from(tagDOM).map((v, i) => {
                    v.setAttribute('sp', 'twoTable')
                });
                break;
            case 'quickview':
                tagDOM = document.querySelectorAll('.w-table table,.echarts-for-react');
                break;
            default:
                break;
        }
    }
    saveFile(tagDOM, fileName);
};

const excelTemplate = (tagArr) => {
    let sheetsInfo = "",
        sheetsDate = "",
        picsDate = "";
    Array.from(tagArr).map((value, index) => {
        let table, sheetName;
        if (value.tagName === 'TABLE' || value.className === 'table') {
            if (['cr', 'chr', 'cvr'].indexOf(pageCode) >= 0) {
                sheetName = mappingFlieName[pageCode];
            } else if (value.getElementsByTagName('caption')[0]) {
                sheetName = value.getElementsByTagName('caption')[0].outerText;
            } else {
                sheetName = '关键数据';
            }
            table = value.outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
        } else {
            const option = getChartData(value);
            const canvas = value.getElementsByTagName('canvas')[0];
            if (value.getAttribute('sp') === 'spEcharts') {
                let og = new OptionGrid.WrappedComponent();
                const tableOption = storeDate.options.layout[0].rows[1].cols[0];
                const tableData = storeDate.options.dataSource["0"];
                const column = og._getTableColumns(tableOption, tableData);
                const tdate = og._getTableData(tableOption, tableData);
                let tableDOM = document.createElement('table');
                tableDOM.innerHTML = `${document.querySelectorAll('.w-table thead')[0].outerHTML}<tbody></tbody>`;
                tableDOM.querySelectorAll('thead')[0].childNodes[0].insertAdjacentHTML('beforeBegin', `<tr style="height: ${canvas.height}px"><td colspan="20"><img src="picture${index}"/></td></tr>`);
                tdate.map((m) => {
                    let tr = document.createElement('tr');
                    tr.setAttribute('key', m.key);
                    tableDOM.getElementsByTagName('tbody')[0].appendChild(tr);
                });
                column.map((value) => {
                    if (value.dataIndex) {
                        tdate.map((v) => {
                            let td = document.createElement('td');
                            td.innerText = v[value.dataIndex];
                            tableDOM.querySelectorAll(`tbody tr[key="${v.key}"]`)[0].appendChild(td);
                        });
                    } else if (value.children) {
                        value.children.map((m) => {
                            if (m.dataIndex) {
                                tdate.map((v) => {
                                    let td = document.createElement('td');
                                    td.innerText = v[m.dataIndex];
                                    tableDOM.querySelectorAll(`tbody tr[key="${v.key}"]`)[0].appendChild(td);
                                });
                            }
                        });
                    }
                });
                table = tableDOM.outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
            } else if (value.getAttribute('sp') === 'twoTable') {
                let d = document.getElementsByTagName('table')[index].cloneNode(true);
                d.querySelectorAll('thead')[0].childNodes[0].insertAdjacentHTML('beforeBegin', `<tr style="height: ${canvas.height}px"><td colspan="20"><img src="picture${index}"/></td></tr>`);
                table = d.outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
            } else {
                if (pageCode === 'quickview' && index === tagArr.length - 1) {
                    pageCode = 'ivs'
                }
                table = getChartTable(option, index, pageCode).outerHTML.replace(/=/g, '=3D').replace(/null/g, '');
            }
            if (option.title) {
                sheetName = option.title;
            } else {
                sheetName = document.getElementsByClassName('w-card-head-title')[0].textContent + index;
            }
            let picInfo = value.getElementsByTagName('canvas')[0].toDataURL(['image/png', 1]).slice(22);
            let picDate = '\r\n' +
                '\r\n------WIND----' +
                '\r\nContent-Transfer-Encoding: base64' +
                '\r\nContent-Location: file:///C:/MimeExcel/picture' + index +
                '\r\nContent-Type: image/png' +
                '\r\n' +
                '\r\n' + picInfo;
            picsDate = picsDate + picDate
        }
        // 单页头信息
        let sheetInfo = '\r\n<x:ExcelWorksheet>' +
            '\r\n<x:Name>' + sheetName + '</x:Name>' +
            '\r\n<x:WorksheetSource HRef=3D"MimeExcel/sheet' + index + '"/>' +
            '\r\n</x:ExcelWorksheet>';

        //单页数据信息
        let sheetDate = '\r\n' +
            '\r\n------WIND----' +
            '\r\nContent-Location: file:///C:/MimeExcel/sheet' + index +
            '\r\nContent-Transfer-Encoding: quoted-printable' +
            '\r\nContent-Type: text/html; charset="utf-8"' +
            '\r\n' +
            '\r\n<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">' +
            '\r\n' +
            '\r\n<head>' +
            '\r\n <meta http-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8">' +
            '\r\n<xml>' +
            '\r\n<x:WorksheetOptions>' +
            '\r\n<x:ProtectContents>False</x:ProtectContents>' +
            '\r\n<x:ProtectObjects>False</x:ProtectObjects>' +
            '\r\n<x:ProtectScenarios>False</x:ProtectScenarios>' +
            '\r\n</x:WorksheetOptions>' +
            '\r\n</xml>' +
            '\r\n</head>' +
            '\r\n<body>' +
            '\r\n<table style=3D"width: 1000px">' +
            table +
            '\r\n</table>' +
            '\r\n</body>' +
            '\r\n</html>';
        //组合成多页
        sheetsInfo = sheetsInfo + sheetInfo;
        sheetsDate = sheetsDate + sheetDate;
    });

    //MIME框架模板
    return ('MIME-Version: 1.0' +
        '\r\nX-Document-Type: Workbook' +
        '\r\nContent-Type: multipart/related; boundary="----WIND----"' +
        '\r\n' +
        '\r\n------WIND----' +
        '\r\nContent-Location: file:///C:/MimeExcel.xml' +
        '\r\nContent-Transfer-Encoding: quoted-printable' +
        '\r\nContent-Type: text/html; charset="utf-8"' +
        '\r\n' +
        '\r\n<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">' +
        '\r\n' +
        '\r\n<head>' +
        '\r\n <meta http-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8">' +
        '\r\n  <xml>' +
        '\r\n   <x:ExcelWorkbook>' +
        '\r\n    <x:ExcelWorksheets>' +
        sheetsInfo +
        '\r\n    </x:ExcelWorksheets>' +
        '\r\n   </x:ExcelWorkbook>' +
        '\r\n  </xml>' +
        '\r\n</head>' +
        '\r\n</html>' +
        sheetsDate +
        picsDate +
        '\r\n' +
        '\r\n------WIND------');
};

const saveFile = ($el, fileName) => {
    let urlObject = window.URL || window.webkitURL || window;
    let exportBlob = new Blob([excelTemplate($el)]);
    let saveLink = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    saveLink.href = urlObject.createObjectURL(exportBlob);
    saveLink.download = fileName.toUpperCase() + '.xls';
    let ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    saveLink.dispatchEvent(ev);
    urlObject.revokeObjectURL(saveLink.href);
};

const getMonthTable = (data) => {
    let table = document.createElement('table');
    let trs = '';
    data.map((v, i) => {
        let tr = `<tr>
                    <td>${v._optionMarkName}</td>
                    <td>${v._windCode}</td>
                    <td>${v._cdMonths}</td>
                    <td>${moment('1899-12-30').add('days', v._endTradeDate).format('YYYY/MM/DD')}</td>
                    <td>${v._dateCount}</td>
                    <td>${v._tradeDateCount}</td>
                    <td>${v._multiplier}</td>
                 </tr>`;
        trs += tr;
    });
    table.innerHTML = `<caption className='table-title'>期权合约月份</caption>
                        <thead><tr><th>标的名称</th><th>标的代码</th><th>到期月份</th>
                        <th>到期日</th><th>剩余日历日</th><th>剩余交易日</th><th>合约乘数</th></tr></thead>
                        <tbody>${trs}</tbody>`;
    return table;
};


const getQueryString = (sQuery) => {
    const params = {};
    if (sQuery && sQuery.length > 0) {
        const arr = sQuery.split('&');
        for (let i in arr) {
            const symbolIndex = arr[i].indexOf('=');
            const key = arr[i].substr(0, symbolIndex);
            params[key] = arr[i].substr(symbolIndex + 1);
        }
    }
    return params;
};

/**
 * 获取echarts配置
 * @param {element} chartsDiv echarts所在DIV
 */
const getChartData = (chartsDiv) => {
    let option = {};
    let myChart = echarts.init(chartsDiv);
    let chartOption = myChart.getOption();
    if (chartOption) {
        option.title = chartOption.title[0].text;
        option.xAxisData = chartOption.xAxis[0].data;
        option.series = [];
        chartOption.series.map((value) => {
            let seriesData = {};
            seriesData.name = value.name;
            seriesData.data = value.data;
            option.series.push(seriesData);
        });
    } else {
        option = null;
    }
    return option;
};


const getChartTable = (option, picIndex, pagecode) => {
    let firstcolumn = {
        'ivs': '行权价'
    };
    let table = document.createElement('table');
    table.innerHTML = `<thead><tr style="height: 300px"><td colspan="20"><img src="picture${picIndex}"/></td></tr><tr class="series"><th>${firstcolumn[pagecode] ? firstcolumn[pagecode] : '日期'}</th></tr></thead><tbody></tbody>`;
    option.series.map((value) => {
        let th = document.createElement('th');
        th.innerText = value.name;
        table.getElementsByClassName('series')[0].appendChild(th);
    });
    let t = document.createElement('tbody');
    option.xAxisData.map((v, i) => {
        let tr = document.createElement('tr');
        tr.setAttribute('data-index', i);
        tr.innerHTML = `<td x:str="${v}" style="text-align:center">${v}</td>`;
        //let t = table.getElementsByTagName('tbody')[0];      
        t.appendChild(tr);
        option.series.map((value, index) => {
            let td = document.createElement('td');
            td.innerText = value.data[i];
            t.querySelectorAll(`tbody tr[data-index="${i}"]`)[0].appendChild(td);
        });
    });
    let arr = Array.from(t.querySelectorAll('tr'));
    if (pagecode !== 'ivs') {
        arr.reverse()
    }
    arr.map((v, i) => {
        table.querySelectorAll('tbody')[0].appendChild(v);
    });
    Array.from(table.querySelectorAll('tr')).map((v) => {
        v.removeAttribute('class');
        v.removeAttribute('data-index');
    });
    return table
};


const mappingFlieName = {

};