Exporter la Table Html pour exceller et garder les styles css
j'utilise excel Web queries pour exporter une table html (mvc view) vers excel. Comment puis-je le faire traverser les styles css? Si j'ai mis class="redLabel" il n'interprète pas cela et rend l'étiquette rouge. Je dois utiliser des styles inline dans ma table pour que cela fonctionne. Des idées?
4 réponses
pour autant que je sache, la plupart des programmes de bureau ne prennent pas en charge le style, mais seulement le style en ligne.
il est probable que vous devrez inclure votre style en ligne (l'exportation craint, presque comme le style de courrier).
Excel supporte l'utilisation du style css, mais seulement s'il y a une classe sur l'élément. S'il y a plusieurs classes, cela ne fera aucun style sur l'élément, voir feuille de style CSS de la classe de ne pas combiner dans Excel
cela dit, c'est le code que j'ai mis en place pour saisir tous les styles sur une page et exporter une table HTML. C'est une force brute, saisissez tout approche, mais vous pouvez probablement mettre par paire si vous connaissez les détails. La fonction renvoie un jQuery Promettre. De ce que vous pouvez faire tout avec le résultat.
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>";
});
}
}
Vous pouvez exporter la table avec le style CSS externe. Voici ma solution déclarer un modèle de document:
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>"
};
Vous pouvez essayer d'utiliser ceci: http://martinnormark.com/move-css-inline-premailer-net