Start to generate PDF export

This commit is contained in:
Pierre HUBERT 2023-08-23 14:56:50 +02:00
parent c5ba69ddeb
commit 947ab0277e

View File

@ -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);*/