Export Html Table to excel and keep css styles

后端未结

关注

 3  1088

I\'m using excel web queries to export an html table (mvc view) to excel. How do I get it to carry across the css styles? If I set class=\"redLabel\" it doesn\'

相关标签:

3条回答

盖世英雄少女心

2021-01-04 18:45

Excel does support using css styling, but only if there is one class on the element. If there are multiple classes then it will not do any style on the element, see CSS style class not combining in Excel

Having said that, this is the code I put together to grab all the styles on a page and export an HTML table. It's a brute force, grab everything approach, but you could probably pair it down if you know the specifics. The function returns a jQuery Promise. From that you can do whatever with the result.

function excelExportHtml(table, includeCss) {

    if (includeCss) {
        var styles = [];

        //grab all styles defined on the page
        $("style").each(function (index, domEle) {
            styles.push($(domEle).html());
        });

        //grab all styles referenced by stylesheet links on the page
        var ajaxCalls = [];
        $("[rel=stylesheet]").each(function () {
            ajaxCalls.push($.get(this.href, '', function (data) {
                styles.push(data);
            }));
        });

        return $.when.apply(null, ajaxCalls)
                .then(function () {
                    return "<html><style type='text/css'>" + styles.join("\n") + "</style>\n" + table.outerHTML + "</html>";
                });
    }
    else {
        return $.when({ owcHtml: table.outerHTML })
                .then(function (result) {
                    return "<html>" + result.owcHtml + "</html>";
                });
    }
}

0 讨论(0)

一生所求

2021-01-04 18:49

As far as I know, most Office programs do NOT support included styling, but only inline styling.

It's likely that you'll be required to include your styling inline (exporting sucks, almost like mail styling).

0 讨论(0)
发布评论:

提交评论
- 加载中...

遥遥无期

2021-01-04 18:59

You can export table with outer css style. Here is my solution declare a document template:

var e = this;
var style = "<style></style"; //You can write css or get content of .css file

e.template = {
            head: "<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>",
            sheet: {
                head: "<x:ExcelWorksheet><x:Name>",
                tail: "</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>"
            },
            mid: "</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->>"+style+"</head><body>",
            table: {
                head: "<table>",
                tail: "</table>"
            },
            foot: "</body></html>"
        };

0 讨论(0)