mirror of
https://github.com/danbulant/Portfolio
synced 2026-07-07 03:50:36 +00:00
feat: svg2pdf render
This commit is contained in:
Sebastian Pravda
EETagent
parent
7f6042843d
commit
219128e938
3 changed files with 171 additions and 0 deletions
|
|
@ -50,6 +50,8 @@
|
||||||
"swiper": "^8.4.6",
|
"swiper": "^8.4.6",
|
||||||
"tippy.js": "^6.3.7",
|
"tippy.js": "^6.3.7",
|
||||||
"typesafe-i18n": "^5.20.0",
|
"typesafe-i18n": "^5.20.0",
|
||||||
|
"jspdf": "^2.5.1",
|
||||||
|
"svg2pdf.js": "^2.2.1",
|
||||||
"yup": "^0.32.11"
|
"yup": "^0.32.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { apiCreateCandidate } from '$lib/@api/admin';
|
||||||
|
import type { CreateCandidate, CreateCandidateLogin } from '$lib/stores/candidate';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import Modal from '../Modal.svelte';
|
||||||
|
import IdField from '../textfield/IdField.svelte';
|
||||||
|
import NumberField from '../textfield/NumberField.svelte';
|
||||||
|
import { jsPDF } from 'jspdf'
|
||||||
|
import 'svg2pdf.js'
|
||||||
|
|
||||||
|
let isOpened = true;
|
||||||
|
|
||||||
|
let applicationId: string = '';
|
||||||
|
let personalId: string = '';
|
||||||
|
|
||||||
|
let login: CreateCandidateLogin;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
const createCandidate = async () => {
|
||||||
|
const data: CreateCandidate = {
|
||||||
|
applicationId: Number(applicationId),
|
||||||
|
personalIdNumber: personalId
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
login = await apiCreateCandidate(data);
|
||||||
|
generatePdf();
|
||||||
|
dispatch('created');
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const generatePdf = async () => {
|
||||||
|
const template = await fetch("/drawing.svg");
|
||||||
|
const blob = await template.blob();
|
||||||
|
const blobText = await blob.text();
|
||||||
|
const svg = blobText.replace("${APPLICATION}", login.applicationId.toString()).replace("${CODE}", login.password);
|
||||||
|
|
||||||
|
const element = document.getElementById("svg-element")!;
|
||||||
|
element.innerHTML = svg;
|
||||||
|
|
||||||
|
const doc = new jsPDF('p', 'mm', [210, 297]);
|
||||||
|
|
||||||
|
await doc.svg(element);
|
||||||
|
|
||||||
|
doc.save('PRIHLASOVACI_UDAJE_' + login.applicationId.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
isOpened = false;
|
||||||
|
dispatch('close');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if isOpened}
|
||||||
|
<Modal on:close={close}>
|
||||||
|
<div class="p-20">
|
||||||
|
<!-- <div class="fixed -top-32 bg-gray-400"> -->
|
||||||
|
<svg width=210mm height=297mm class="w-[210mm] h-[297mm] hidden" id="svg-element"></svg>
|
||||||
|
<!-- </div> -->
|
||||||
|
{#if login}
|
||||||
|
<h1 class="text-sspsBlue text-3xl font-semibold">{applicationId}</h1>
|
||||||
|
<h1 class="text-sspsBlue text-3xl font-semibold">{login.password}</h1>
|
||||||
|
{:else}
|
||||||
|
<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
|
||||||
|
<h3 class="my-4">Evidenčni číslo přihlášky</h3>
|
||||||
|
<NumberField bind:value={applicationId} />
|
||||||
|
<h3 class="my-4">Rodné číslo</h3>
|
||||||
|
<IdField bind:value={personalId} />
|
||||||
|
<input
|
||||||
|
on:click={createCandidate}
|
||||||
|
class="bg-sspsBlue hover:bg-sspsBlueDark mt-6 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
|
||||||
|
type="submit"
|
||||||
|
value="Vytvořit"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
86
frontend/static/drawing.svg
Normal file
86
frontend/static/drawing.svg
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="210mm"
|
||||||
|
height="297mm"
|
||||||
|
viewBox="0 0 210 297"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="drawing.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.54488788"
|
||||||
|
inkscape:cx="376.22419"
|
||||||
|
inkscape:cy="548.73675"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<rect
|
||||||
|
style="fill:#0000ff;stroke-width:0.264583"
|
||||||
|
id="rect788"
|
||||||
|
width="65.580345"
|
||||||
|
height="76.91098"
|
||||||
|
x="41.545662"
|
||||||
|
y="78.284393" />
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:9.87777px;fill:#0000ff;stroke-width:0.264583"
|
||||||
|
x="33.648552"
|
||||||
|
y="187.12717"
|
||||||
|
id="text844"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan842"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono';stroke-width:0.264583"
|
||||||
|
x="33.648552"
|
||||||
|
y="187.12717">${APPLICATION}</tspan></text>
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:9.87777px;fill:#0000ff;stroke-width:0.264583"
|
||||||
|
x="35.021965"
|
||||||
|
y="202.23468"
|
||||||
|
id="text898"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan896"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono';stroke-width:0.264583"
|
||||||
|
x="35.021965"
|
||||||
|
y="202.23468">${CODE}</tspan></text>
|
||||||
|
<rect
|
||||||
|
style="fill:#00ff00;stroke-width:0.264583"
|
||||||
|
id="rect6059"
|
||||||
|
width="82.061272"
|
||||||
|
height="65.236992"
|
||||||
|
x="97.168785"
|
||||||
|
y="39.48555" />
|
||||||
|
<ellipse
|
||||||
|
style="fill:#ff0000;stroke-width:0.264583"
|
||||||
|
id="path6327"
|
||||||
|
cx="129.95895"
|
||||||
|
cy="136.1393"
|
||||||
|
rx="58.884972"
|
||||||
|
ry="44.464161" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in a new issue