导出 Html 表格到 excel 并保持 css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6909778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Export Html Table to excel and keep css styles
提问by newbie_86
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't interpret that and make the label red. I have to use inline styles in my table for this to work. Any ideas?
我正在使用 excel web 查询将 html 表（mvc 视图）导出到 excel。我如何让它跨越 css 样式？如果我设置class="redLabel"它不会解释它并使标签变为红色。我必须在我的表中使用内联样式才能工作。有任何想法吗？
回答by Madara's Ghost
As far as I know, most Office programs do NOT support included styling, but only inline styling.
据我所知，大多数 Office 程序不支持包含样式，而只支持内联样式。
It's likely that you'll be required to include your styling inline (exporting sucks, almost like mail styling).
您很可能需要内联包含样式（导出很糟糕，几乎就像邮件样式一样）。
回答by Homer
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
Excel 确实支持使用 css 样式，但前提是元素上只有一个类。如果有多个类，那么它不会对元素做任何样式，请参阅 未在 Excel 中组合的 CSS 样式类
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.
话虽如此，这是我放在一起的代码，用于获取页面上的所有样式并导出 HTML 表。这是一种蛮力，抓住一切方法，但如果您知道具体细节，您可能可以将其配对。该函数返回一个 jQuery Promise。从那你可以对结果做任何事情。
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>";
});
}
}
回答by rdabrowski
You can export table with outer css style. Here is my solution declare a document template:
您可以使用外部 css 样式导出表。这是我的解决方案声明一个文档模板：
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>"
};
![我应该使用 CSS :disabled 伪类还是 [disabled] 属性选择器，还是见仁见智？](/res/img/loading.gif)