Start to generate PDF export
This commit is contained in:
parent
c5ba69ddeb
commit
947ab0277e
@ -5,6 +5,10 @@ import { FamilyTreeNode } from "../../utils/family_tree";
|
|||||||
import { Member, fmtDate } from "../../api/MemberApi";
|
import { Member, fmtDate } from "../../api/MemberApi";
|
||||||
import { Couple } from "../../api/CoupleApi";
|
import { Couple } from "../../api/CoupleApi";
|
||||||
import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
|
import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
|
||||||
|
import { IconButton } from "@mui/material";
|
||||||
|
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
||||||
|
import { jsPDF } from "jspdf";
|
||||||
|
import "svg2pdf.js";
|
||||||
|
|
||||||
export function ComplexFamilyTree(p: {
|
export function ComplexFamilyTree(p: {
|
||||||
tree: FamilyTreeNode;
|
tree: FamilyTreeNode;
|
||||||
@ -69,12 +73,58 @@ export function ComplexFamilyTree(p: {
|
|||||||
store.update.tree({ initial: true });
|
store.update.tree({ initial: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const exportPDF = async () => {
|
||||||
|
const doc = new jsPDF({
|
||||||
|
orientation: "l",
|
||||||
|
format: [1000, 1000],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clone the SVG to manipulate it
|
||||||
|
const srcEl = document.getElementById("FamilyChart")?.children[0]!;
|
||||||
|
const srcSVG = srcEl.innerHTML!;
|
||||||
|
|
||||||
|
// SVG manipulations (adaptations to export)
|
||||||
|
let dstSVG = srcSVG.replaceAll(
|
||||||
|
`<path class="link" fill="none" stroke="#fff"`,
|
||||||
|
`<path class="link" fill="none" stroke="#000"`
|
||||||
|
);
|
||||||
|
|
||||||
|
dstSVG = dstSVG.replaceAll(
|
||||||
|
`class="card-body-rect"`,
|
||||||
|
`class="card-body-rect" fill="white"`
|
||||||
|
);
|
||||||
|
|
||||||
|
dstSVG = dstSVG.replaceAll(
|
||||||
|
`class="text-overflow-mask"`,
|
||||||
|
`class="text-overflow-mask" fill="transparent"`
|
||||||
|
);
|
||||||
|
|
||||||
|
srcEl.innerHTML = dstSVG;
|
||||||
|
|
||||||
|
await doc.svg(srcEl, {
|
||||||
|
height: 1000,
|
||||||
|
width: 1000,
|
||||||
|
});
|
||||||
|
|
||||||
|
srcEl.innerHTML = srcSVG;
|
||||||
|
|
||||||
|
// Save the created pdf
|
||||||
|
doc.save("myPDF.pdf");
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{ textAlign: "right" }}>
|
||||||
|
<IconButton onClick={exportPDF}>
|
||||||
|
<PictureAsPdfIcon />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
|
className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
|
||||||
id="FamilyChart"
|
id="FamilyChart"
|
||||||
ref={refCb}
|
ref={refCb}
|
||||||
></div>
|
></div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -211,21 +261,3 @@ function treeToF3DataDownRecurse(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
import { jsPDF } from "jspdf";
|
|
||||||
import "svg2pdf.js";
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
const doc = new jsPDF({
|
|
||||||
orientation: "l",
|
|
||||||
format: [1000, 1000],
|
|
||||||
});
|
|
||||||
|
|
||||||
const element = document.getElementById("FamilyChart");
|
|
||||||
console.log(element);
|
|
||||||
doc.svg(element!.children[0], { height: 1000, width: 1000 }).then(() => {
|
|
||||||
// save the created pdf
|
|
||||||
//doc.save("myPDF.pdf");
|
|
||||||
});
|
|
||||||
}, 6000);*/
|
|
||||||
|
Loading…
Reference in New Issue
Block a user