index.html
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <svg id='iamsvg' width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="25" y="25" width="50" height="50"> </svg> </div> <div class="container"> <button id="svg">🟥 as svg</button> <button id="png">🟥 as png</button> <button id="pdf">🟥 as pdf</button> </div> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
* { box-sizing: border-box; } html, body { height: 100vh; } .container { display: flex; justify-content: center; align-items: center; gap: 1rem; } .emoji { font-size: 2rem; } |
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import * as saveSvgAsPng from "https://cdn.skypack.dev/save-svg-as-png@1.4.17"; import { jsPDF } from "https://cdn.skypack.dev/jspdf@2.3.1"; const svgBtn = document.getElementById("svg"); const pngBtn = document.getElementById("png"); const pdfBtn = document.getElementById("pdf"); svgBtn.addEventListener("click", () => { const element = document.getElementById("iamsvg"); const filename = "myfilename.svg"; saveSvgAsPng.saveSvg(element, filename); }); pngBtn.addEventListener("click", () => { const element = document.getElementById("iamsvg"); const filename = "myfilename.png"; saveSvgAsPng.saveSvgAsPng(element, filename); }); pdfBtn.addEventListener("click", () => { const element = document.getElementById("iamsvg"); const filename = "myfilename.pdf"; saveSvgAsPng.svgAsPngUri(element).then((dataUrl) => { console.log(dataUrl) const doc = new jsPDF(); doc.addImage(dataUrl, "PNG", 0, 0).save(filename); }); }); |
