Skip to content

Instantly share code, notes, and snippets.

@ThomasJunk

ThomasJunk/index1.html

Last active July 30, 2019 08:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasJunk/f50fdec01637d7e2822e81db221363b8 to your computer and use it in GitHub Desktop.
Save ThomasJunk/f50fdec01637d7e2822e81db221363b8 to your computer and use it in GitHub Desktop.
Download ZIP
svg2pdf
Raw
index1.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="container" style="width:100vw; height:100vh;">
<svg width="100%" height="100%">
<g inkscape:label="Ebene 1" inkscape:groupmode="layer" id="layer1">
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect3713"
width="100"
height="100"
x="10"
y="10"
/>
</g>
</svg>
</div>
<script src="js/jspdf/jspdf.debug.js"></script>
<script src="js/svg2pdf/svg2pdf.js"></script>
<script>
const pdfExport = () => {
const svgElement = document.querySelector("svg");
const width = 297 / 0.352778;
height = 210 / 0.352778;
// create a new jsPDF instance
const pdf = new jsPDF("l", "pt", [width, height]);
// render the svg element
svg2pdf(svgElement, pdf, {
xOffset: 0,
yOffset: 0,
scale: 1 / 0.352778
});
// get the data URI
const uri = pdf.output("datauristring");
// or simply save the created pdf
pdf.save("myPDF.pdf");
};
document.addEventListener("DOMContentLoaded", function(event) {
pdfExport();
});
</script>
</body>
</html>
Raw
index2.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="container" style="width:100vw; height:100vh;">
<svg>
<g inkscape:label="Ebene 1" inkscape:groupmode="layer" id="layer1">
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect3713"
width="100"
height="50"
x="10"
y="10"
/>
</g>
</svg>
</div>
<script src="js/jspdf/jspdf.debug.js"></script>
<script src="js/svg2pdf/svg2pdf.js"></script>
<script>
const pdfExport = () => {
const svgElement = document.querySelector("svg");
const DPI = 80;
const pixel2millimeter = (pixels, dpi) => {
return (pixels * 25.4) / dpi;
};
const millimeter2pixel = (length, dpi) => {
return (dpi * length) / 25.4;
};
const svgWidth = millimeter2pixel(200, DPI);
const svgHeight = millimeter2pixel(100, DPI);
svgElement.querySelector("rect").setAttribute("width", `${svgWidth}`);
svgElement.querySelector("rect").setAttribute("height", `${svgHeight}`);
svgElement.setAttribute("width", `${svgWidth}`);
svgElement.setAttribute("height", `${svgHeight}`);
const width = 420,
height = 297;
const pdf = new jsPDF("l", "mm", [width, height]);
svg2pdf(svgElement, pdf, {
xOffset: 10,
yOffset: 10,
scale: pixel2millimeter(1, DPI)
});
pdf.save("myPDF.pdf");
};
document.addEventListener("DOMContentLoaded", function(event) {
pdfExport();
});
</script>
</body>
</html>
Raw
index3.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="container" style="width:100vw; height:100vh;">
<svg width="100%" height="100%">
<g inkscape:label="Ebene 1" inkscape:groupmode="layer" id="layer1">
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect3713"
width="100"
height="100"
x="10"
y="10"
/>
</g>
</svg>
</div>
<script src="js/jspdf/jspdf.debug.js"></script>
<script src="js/svg2pdf/svg2pdf.js"></script>
<script>
const pdfExport = () => {
const svgElement = document.querySelector("svg");
const width = 297;
height = 210;
// create a new jsPDF instance
const pdf = new jsPDF("l", "mm", [width, height]);
// render the svg element
svg2pdf(svgElement, pdf, {
xOffset: 0,
yOffset: 0,
scale: 1
});
// get the data URI
const uri = pdf.output("datauristring");
// or simply save the created pdf
pdf.save("myPDF.pdf");
};
document.addEventListener("DOMContentLoaded", function(event) {
pdfExport();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment