[ExportService] ヘッダー、フッターに設定したグラデーション色がエクスポートされない【回避方法】
HTML
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="//cdn.wijmo.com/jquery.wijmo-pro.all.3.20152.80.min.css">
<script src="//cdn.wijmo.com/jquery.wijmo-open.all.3.20152.80.min.js"></script>
<script src="//cdn.wijmo.com/jquery.wijmo-pro.all.3.20152.80.min.js"></script>
<input type="button" value="エクスポート" onclick="exportExcel()" />
<table id="demo"></table>
CSS
.wijmo-wijgrid .wijmo-wijgrid-headerrow > th {
background: Gainsboro !important;
}
.wijmo-wijgrid .wijmo-wijgrid-footerrow {
background: DarkGray !important;
}
JavaScript
$(document).ready(function () {
// グリッドを設定する
$("#demo").wijgrid({
columnsAutogenerationMode: "none",
columns: [
{ dataKey: "Country", headerText: "Country", dataType: "string", aggregate: "count", footerText: "Count: <b>{0}</b>" },
{ dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency", aggregate: "average", footerText: "Avg: <b>{0}</b>" },
{ dataKey: "Quantity", headerText: "Quantity", dataType: "number", aggregate: "sum", footerText: "Sum: <b>{0}</b>" },
{ dataKey: "Discount", headerText: "Discount", dataType: "number", aggregate: "max", footerText: "Max: <b>{0}</b>" }
],
data: getData(5),
showFooter: true
});
});
function exportExcel() {
// Excelエクスポート
$("#demo").wijgrid(
"exportGrid",
"sample",
"xlsx"
);
}
// random data generators
function getData(count) {
var data = [];
var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(",");
for (var i = 0; i < count; i++) {
data.push({
Country: getString(country),
UnitPrice: Math.floor(getNumber(5, 10)),
Quantity: Math.floor(getNumber(1, 5)) * 10,
Discount: getNumber(0, 0.3)
});
}
return data;
}
function getString(arr) {
return arr[Math.floor((Math.random() * arr.length))];
}
function getNumber(lo, hi) {
return lo + Math.random() * (hi - lo);
}