JS（十四）前端导出表格和echats图形到excel

最新推荐文章于 2024-11-28 18:23:52 发布

原创

最新推荐文章于 2024-11-28 18:23:52 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

本文介绍了在前端使用JavaScript技术将网页中的表格数据和Echarts图表导出为Excel文件的方法，解决可能出现的字符转换问题。

import $ from 'jquery';
import echarts from 'echarts';
import store from '../../store';
import moment from 'moment';
import { getQueryString, NumberFormat, convertThousands } from '../../utils/commonLib';

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 = '\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\