Я использую веб-запросы excel для экспорта таблицы html (представление mvc) для Excel. Как мне заставить его переносить стили css? Если я устанавливаю class="redLabel"
, он не интерпретирует это и делает ярлык красным. Для этого мне нужно использовать встроенные стили в моей таблице. Любые идеи?
Экспорт таблицы Html для улучшения и сохранения стилей CSS
Ответ 1
Насколько я знаю, большинство программ Office НЕ поддерживают включенный стиль, но только встроенный стиль.
Вероятно, вам нужно будет включить ваш стиль inline (экспорт отстой, почти как стиль почты).
Ответ 2
Excel поддерживает использование стилей css, но только в том случае, если в элементе есть один класс. Если существует несколько классов, то не будет никакого стиля в элементе, см. класс стиля CSS, не объединяющийся в Excel
Сказав это, это код, который я собрал, чтобы захватить все стили на странице и экспортировать таблицу 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>";
});
}
}
Ответ 3
Вы можете экспортировать таблицу с внешним стилем 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>"
};
Ответ 4
Вы можете попробовать: http://martinnormark.com/move-css-inline-premailer-net