Fix PDF export

This commit is contained in:
Pierre HUBERT 2023-08-23 15:18:23 +02:00
parent 947ab0277e
commit 852354b739
2 changed files with 28 additions and 13 deletions

View File

@ -16,7 +16,7 @@ export function ComplexFamilyTree(p: {
}): React.ReactElement {
const darkTheme = useDarkTheme();
const refCb = (container: HTMLDivElement) => {
const applyTree = (container: HTMLDivElement) => {
if (!container) return;
const store = f3.createStore({
@ -26,7 +26,7 @@ export function ComplexFamilyTree(p: {
}),
view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart"),
cont: container,
}),
Card = f3.elements.Card({
store,
@ -70,21 +70,27 @@ export function ComplexFamilyTree(p: {
view.setCard(Card);
store.setOnUpdate((props) => view.update(props || {}));
store.update.tree({ initial: true });
store.update.tree({ initial: false, transition_time: 0 });
};
const exportPDF = async () => {
const doc = new jsPDF({
orientation: "l",
format: [1000, 1000],
format: [900, 1200],
});
// Clone the SVG to manipulate it
const srcEl = document.getElementById("FamilyChart")?.children[0]!;
const srcSVG = srcEl.innerHTML!;
const container = document.createElement("div");
container.classList.add("f3", "f3-export");
document.body.appendChild(container);
applyTree(container);
const target = container.children[0];
await new Promise((res) => setTimeout(() => res(null), 100));
// SVG manipulations (adaptations to export)
let dstSVG = srcSVG.replaceAll(
let dstSVG = target.innerHTML.replaceAll(
`<path class="link" fill="none" stroke="#fff"`,
`<path class="link" fill="none" stroke="#000"`
);
@ -99,14 +105,14 @@ export function ComplexFamilyTree(p: {
`class="text-overflow-mask" fill="transparent"`
);
srcEl.innerHTML = dstSVG;
target.innerHTML = dstSVG;
await doc.svg(srcEl, {
height: 1000,
width: 1000,
await doc.svg(target, {
height: 3508,
width: 2480,
});
srcEl.innerHTML = srcSVG;
container.remove();
// Save the created pdf
doc.save("myPDF.pdf");
@ -122,7 +128,7 @@ export function ComplexFamilyTree(p: {
<div
className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
id="FamilyChart"
ref={refCb}
ref={applyTree}
></div>
</div>
);

View File

@ -100,3 +100,12 @@
.f3-light .link {
stroke: black;
}
.f3-export {
position: fixed;
top: 0px;
left: 0px;
width: 3508px;
height: 2480px;
opacity: 0;
}