dm5wk/band-plan-web
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

save to html file with css styles

Browse source
This commit is contained in:
Wolfgang 2024-05-30 17:57:12 +02:00
parent e181276de9
commit 5566a71692
2 changed files with 77 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
band-plan.html
View file

@ -26,8 +26,12 @@ div>label {
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet"> <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/browser-cjs/require.min.js"></script> <script src="https://unpkg.com/browser-cjs/require.min.js"></script>
<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script> <script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<!--
for pdf saving
<script src="https://unpkg.com/jspdf/dist/jspdf.umd.min.js"></script> <script src="https://unpkg.com/jspdf/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable/dist/jspdf.plugin.autotable.min.js"></script> <script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/html2canvas-pro/dist/html2canvas-pro.min.js"></script>
-->
<script> <script>
// require in browser-cjs // require in browser-cjs
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
@ -231,6 +235,44 @@ div>label {
selectableRows: true, selectableRows: true,
data: tdata, data: tdata,
autoColumns: "full", autoColumns: "full",
downloadEncoder: function(fileContents, mimeType){
// add header and footer for a complete html file
let header = "<!doctype html><html><head><style>";
for (let i = 0; i < document.styleSheets.length; i++) {
let css = document.styleSheets[i];
if (css.ownerNode.id === "link_css") {
for (let j = 0; j < css.cssRules.length; j++) {
header += css.cssRules[j].cssText + "\n";
}
}
}
header += "</style></head><body>";
let footer = "</body></html>";
// add footer for horizontal line
let t = document.createElement("div");
t.insertAdjacentHTML("beforeend", fileContents);
t.firstChild.insertAdjacentHTML("beforeend", "<tfoot><tr><td colspan=\"100%\"></td></tr></tfoot>");
fileContents = t.innerHTML;
fileContents = fileContents.replaceAll(">undefined<", "><");
// also save as pdf
// currently scaling is wrong, no idea how to fix
//const doc = new jspdf.jsPDF("p", "mm", "a4");
//doc.html(header + fileContents + footer, {
// callback: (doc) => {
// doc.save();
// },
// filename: path.basename(document.getElementById("base_input").value, ".yml") + ".pdf",
// autoPaging: "text",
// html2canvas: {
// scale: 0.5,
// },
//});
return new Blob([header, fileContents, footer], {type:mimeType});
},
// add filter for all columns // add filter for all columns
autoColumnsDefinitions: function(definitions){ autoColumnsDefinitions: function(definitions){
definitions.forEach((column) => { definitions.forEach((column) => {
@ -294,11 +336,13 @@ div>label {
if (table.getSelectedRows().length > 0) { if (table.getSelectedRows().length > 0) {
download_range = "selected"; download_range = "selected";
} }
table.download(
"pdf", table.downloadToTab(
path.basename(document.getElementById("base_input").value, ".yml") + ".pdf", "html",
{ orientation:"portrait" }, path.basename(document.getElementById("base_input").value, ".yml") + ".html",
download_range); { },
download_range,
);
}); });
table.on("tableBuilt", () => { table.on("tableBuilt", () => {

27
standard.css
View file

@ -16,7 +16,7 @@
.cell-bandwidth-unrestricted { .cell-bandwidth-unrestricted {
background-color: color-mix(in srgb, Gray 50%, transparent); background-color: color-mix(in srgb, Gray 50%, transparent);
} }
.row-bandwidth-undefined>.tabulator-cell { .row-bandwidth-undefined > .tabulator-cell, tr:has(.cell-bandwidth-undefined) > td {
background-color: color-mix(in srgb, Red 50%, transparent); background-color: color-mix(in srgb, Red 50%, transparent);
} }
.cell-frequency:not(.cell-frequency-is_range) { .cell-frequency:not(.cell-frequency-is_range) {
@ -25,3 +25,28 @@
[class*='contest_preferred'] { [class*='contest_preferred'] {
background-color: color-mix(in srgb, Gold 30%, transparent); background-color: color-mix(in srgb, Gold 30%, transparent);
} }
/* table settings for printing */
:root {
--border: 0.5px solid;
}
table {
border-spacing: 0;
}
th, td {
border-left: var(--border);
}
th:last-child, td:last-child {
border-right: var(--border);
}
th {
border-top: var(--border);
border-bottom: var(--border);
}
tr:nth-child(even) {
background-color: color-mix(in srgb, Gray 10%, transparent);;
}
tfoot > tr > td {
padding-top: 0;
border-bottom: var(--border);
}