Skip to content

Instantly share code, notes, and snippets.

@jacoduplessis

jacoduplessis/pdf.js

Created October 1, 2016 01:36
Show Gist options
  • Save jacoduplessis/37fb32c194280e417930b973bfbf063a to your computer and use it in GitHub Desktop.
Save jacoduplessis/37fb32c194280e417930b973bfbf063a to your computer and use it in GitHub Desktop.
Download ZIP
Create PDF including SVGs
Raw
pdf.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
.quadrant-text {
text-anchor: middle;
font-weight: 600;
font-size: 110%;
}
.point {
stroke: #000;
stroke-width: 2px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2 class="page-break-after">Heading 2</h2>
<h3>Heading 3</h3>
<div class="page-break"></div>
<a href="#" id="toggle-quadrants">Toggle Quadrants</a>
<a href="#" id="toggle-curves">Toggle Curves</a>
<a href="#" id="make-pdf">Make PDF</a>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu ex sit amet turpis tempor rhoncus. Suspendisse potenti. Suspendisse feugiat massa sapien, eget volutpat felis semper sed. Nulla est lacus, venenatis feugiat magna quis, lobortis laoreet
augue. Proin interdum eros vel elit placerat, vel sodales lectus iaculis. Praesent placerat nisi nec augue ultrices mollis. Duis sed libero rutrum, condimentum diam id, egestas dolor. Donec cursus, libero mollis efficitur ornare, est urna tincidunt
purus, quis efficitur arcu nulla in metus. Mauris ac mi id mauris placerat commodo. Aliquam at pulvinar turpis. Proin facilisis semper tincidunt. Quisque eros dui, tincidunt ac rutrum ac, blandit vel lectus. Nullam ante sapien, pellentesque ut imperdiet
ut, pharetra id nisl. Suspendisse non enim a libero semper efficitur. Integer eros ante, convallis vitae libero ac, vulputate laoreet nunc. Phasellus at pharetra erat. Aliquam tellus erat, vehicula vel nulla at, malesuada facilisis ligula. Duis eget
tortor nisl. Vestibulum eget luctus sapien, et venenatis mi. Praesent tincidunt est nec massa bibendum, eget laoreet lacus scelerisque. Nulla nulla justo, tempus vitae dignissim id, efficitur eu lacus. Suspendisse potenti. In hac habitasse platea dictumst.
Praesent felis nibh, tristique a interdum a, ultrices et ex. Proin rutrum diam vitae lectus porttitor ultrices. Aenean sed pretium elit, vitae luctus purus. Maecenas elementum lectus nec sapien molestie fringilla. Pellentesque at sollicitudin nibh.
Sed nec est ac nunc porttitor lobortis. Etiam ligula sapien, sodales eget risus eu, dignissim malesuada turpis. Proin consectetur malesuada libero a vulputate. Nulla vulputate sapien sed tortor porta, a facilisis mi venenatis. Duis justo nibh, porttitor
vitae tristique at, tincidunt vitae tellus. Phasellus ac arcu volutpat, dignissim nunc at, vulputate ipsum. Pellentesque et neque quis tortor dignissim dapibus. Pellentesque dignissim convallis metus, id luctus lectus tempor ac. Suspendisse scelerisque
gravida arcu, eget fermentum ante egestas vitae. Nam egestas sed quam sed blandit. Integer aliquam ornare eleifend. Ut ornare ut erat id laoreet. Aenean convallis posuere vulputate. Mauris elementum ut ante lobortis dictum. Phasellus nec mattis nulla,
eget feugiat ligula. Cras sit amet felis non ante vulputate interdum at ac odio. Maecenas sagittis tellus et cursus bibendum. Praesent consequat cursus fermentum. Proin ornare aliquam eros eget eleifend. Ut placerat augue ex, eu venenatis elit blandit
quis. Vivamus egestas eget mauris sit amet maximus. Donec auctor cursus odio, sit amet mattis leo finibus eget. Aliquam quis lorem ut mi posuere ullamcorper non vel nisi. Sed pretium sem at nibh vestibulum, vel cursus erat porttitor. Suspendisse diam
augue, tincidunt eget turpis in, tincidunt fermentum mi. Phasellus id augue tempus, scelerisque odio id, luctus felis. Maecenas commodo lorem in tellus aliquam semper. Donec volutpat ligula at magna mattis aliquet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In mi dolor, imperdiet pulvinar imperdiet a, cursus ut ante. Nullam sit amet tempor mi. Aenean nec vulputate elit, ac rutrum justo. Quisque dui
ipsum, ullamcorper sed hendrerit a, tristique et tellus. Duis porttitor in orci sed eleifend. Quisque vel euismod lectus. Fusce tempus leo non sapien euismod gravida. Etiam id dignissim ipsum. Nulla finibus euismod arcu, id dapibus sapien porttitor
in. Donec vel ultricies purus. Nam porta nisi vitae nisl vehicula, ut ornare velit ultrices. Pellentesque interdum gravida nibh, id blandit est tempus eget. Etiam a elementum erat. Vivamus non vulputate odio. Nunc ac urna accumsan, ultrices velit non,
tincidunt nisl. Quisque finibus ante fermentum mollis dictum. Etiam augue erat, malesuada quis sollicitudin vitae, vulputate ut ipsum. Etiam quis diam eget augue semper efficitur eu sed tortor. Suspendisse lobortis vehicula diam nec aliquet. Nulla non
elementum nulla. Quisque ac augue libero. Vestibulum molestie vitae est eu dictum. Aliquam id lacinia enim. Fusce molestie sagittis nisl, hendrerit malesuada neque aliquet ut. Etiam a justo vel justo dapibus molestie. Sed ut tortor facilisis, congue
eros a, euismod nulla. Vivamus interdum porta sapien in hendrerit. Sed commodo neque ligula, eget tristique urna aliquam sit amet. In ac dolor ullamcorper, dignissim purus ut, rutrum mi. Vivamus cursus quis ipsum ut consequat. Donec odio mi, eleifend
non enim ac, maximus accumsan ipsum. Cras quis pellentesque lectus, pretium posuere diam. Nunc eu lorem vitae elit tempor pretium. Phasellus vitae ultricies odio. Morbi eu fermentum lacus, at hendrerit est. Integer ornare at tellus sit amet pellentesque.
Nam condimentum egestas nisi quis venenatis. Morbi porttitor maximus tellus, vel euismod urna interdum quis. Nulla sodales volutpat diam, sit amet sollicitudin nisi venenatis scelerisque. Maecenas ut pulvinar est, vitae maximus odio. Nulla eros libero,
pharetra at tempus vitae, efficitur sit amet est. Curabitur vestibulum semper mollis. Cras aliquet augue non finibus blandit. Curabitur ac velit nec ipsum volutpat aliquam non quis purus. Nunc pretium non massa a tincidunt. Fusce suscipit pellentesque
eros eu dignissim. Integer quis ligula eleifend, euismod urna ac, tristique sapien. Cras cursus porta enim, at auctor risus hendrerit mollis. In est urna, pulvinar id lacinia sit amet, blandit sed tellus. Vivamus id ligula sed eros vulputate lobortis.
Vivamus ante est, fringilla sit amet sapien feugiat, facilisis dictum sapien. Maecenas sed ipsum luctus, auctor risus at, placerat tellus. Ut sit amet pellentesque enim. Aliquam velit enim, faucibus vitae ullamcorper vel, euismod et mauris. Maecenas
sit amet velit sit amet diam eleifend bibendum a accumsan nulla. Sed pulvinar porttitor sagittis. Curabitur ac bibendum tellus, ac varius orci. Pellentesque pellentesque velit sit amet eros interdum lobortis. Vivamus volutpat arcu ut nisl auctor, ut
aliquet odio finibus. Aenean efficitur lobortis urna iaculis consectetur. Ut posuere vestibulum consequat. Donec eget congue mauris, vitae interdum lectus. Morbi pellentesque sodales libero sed pharetra. Sed tincidunt est vel egestas blandit. Etiam
non facilisis augue. Proin accumsan nisi nec aliquam mattis. In consectetur sagittis felis, id egestas lorem imperdiet quis. Quisque iaculis id orci nec laoreet. Fusce leo nunc, lobortis consequat facilisis in, ultrices at quam. Maecenas auctor felis
sapien, ac bibendum diam porttitor id. Nunc vulputate blandit augue, accumsan egestas dui vehicula vitae. Quisque vel ante arcu. Curabitur non ornare risus, id venenatis purus. Aliquam erat volutpat. Nunc eleifend lectus et facilisis molestie. Donec
lobortis leo quis gravida facilisis. Donec at eros vitae lectus scelerisque dapibus vitae sit amet nibh. Aliquam vel tortor non velit ultrices tincidunt tempor aliquam massa. Nunc eget tincidunt nulla, at maximus lacus. Nam nec eros gravida, congue
est ac, consectetur nisl. Nulla convallis malesuada turpis ut feugiat. Aliquam erat volutpat. Praesent tincidunt ut libero non luctus. Cras bibendum elementum ipsum, vel ullamcorper augue consequat sit amet. Aliquam sit amet mattis risus. Donec interdum
pretium nulla, in consectetur lorem venenatis non. Phasellus feugiat pharetra imperdiet. Sed vitae felis vel nibh ullamcorper pharetra. Proin commodo urna eu tortor posuere facilisis. Etiam vel scelerisque augue. Pellentesque consectetur commodo magna,
at tincidunt risus congue ut. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin diam metus, tempor non ligula vel, aliquam gravida velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce id est et turpis faucibus pretium. Nullam vel convallis mi. Nulla porta viverra magna, elementum suscipit augue congue in. Maecenas cursus turpis a orci semper euismod. Nullam
eleifend lacus pharetra molestie pharetra. Mauris sem mauris, eleifend nec libero in, blandit rhoncus nisi. Pellentesque sed enim in arcu condimentum volutpat. In venenatis fringilla accumsan. Donec suscipit velit massa, id malesuada turpis eleifend
ut. Morbi vehicula condimentum mauris, ac suscipit tellus cursus et. Nunc eget auctor tortor. Nam convallis erat sit amet enim lobortis, viverra mattis justo ullamcorper. Fusce convallis metus vel mauris feugiat, sed cursus diam euismod. Aenean ut tortor
a nisl cursus pharetra at vitae purus. Aenean et nunc accumsan nibh posuere iaculis. Suspendisse odio dui, dictum a suscipit vulputate, maximus in neque. Vivamus eget ex at sem pulvinar accumsan. Integer commodo consequat turpis, vitae porta tellus
elementum nec. Suspendisse nunc urna, auctor vitae elit nec, ornare vulputate erat. Cras ut porta libero. Pellentesque egestas ex vitae auctor ultrices. Morbi pretium cursus nibh, a convallis nisi condimentum non. Etiam semper interdum nulla sit amet
mollis. Vivamus condimentum sed odio nec pellentesque. Sed interdum venenatis viverra. Donec vulputate eros ut lacus pretium, a iaculis orci accumsan. Maecenas at mollis ex. Proin pulvinar nec turpis at sollicitudin. Pellentesque auctor tortor vitae
purus ullamcorper malesuada. Nam quis mollis odio, eget finibus diam. Sed interdum tortor sed sapien condimentum sollicitudin. Suspendisse eget eros quis felis ornare condimentum in sed ipsum. Duis eu lacinia magna. Fusce ultricies accumsan interdum.
Donec id ex vel tellus dictum cursus a eget tortor. Sed eros nisi, tincidunt auctor tristique nec, semper congue velit. Quisque ut porttitor quam. Maecenas quis risus et nisi ultricies posuere nec quis sem. Nullam felis purus, interdum at facilisis
vitae, posuere at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc imperdiet porttitor arcu viverra elementum. In laoreet porta enim, et imperdiet ligula vulputate eu. Vestibulum vitae placerat
massa. Cras sit amet pellentesque sem. Suspendisse a metus quis ante pretium placerat nec ac odio. Mauris nec metus sed lacus venenatis volutpat. Cras at neque et nulla ultricies scelerisque. Nam sollicitudin justo ut nunc varius eleifend. Duis fermentum
enim eu magna euismod, faucibus auctor eros elementum. Morbi egestas auctor augue a scelerisque. Quisque nec leo leo. Sed vel congue augue, vehicula ornare turpis. Donec posuere malesuada pharetra. In mauris tellus, molestie vel maximus at, luctus tristique
libero. Aliquam interdum felis at vehicula pulvinar. Cras non diam vulputate, venenatis sem in, vehicula dui. Morbi id nisl molestie, congue nibh non, varius turpis. Aenean eget porta ligula. Ut non cursus odio, quis imperdiet lacus. Mauris gravida
euismod lacus vitae porttitor. Aliquam id suscipit ante. Vestibulum sagittis erat augue. Vestibulum efficitur mi urna, nec posuere est iaculis et. Etiam lobortis neque et fermentum sollicitudin. Duis condimentum eros diam, vitae dignissim odio porta
eu. Nam rhoncus massa eu massa fringilla commodo. In vitae tempus tortor, vel molestie nunc. Fusce iaculis tortor quis commodo porta. In eu placerat arcu, quis facilisis metus. Quisque et mattis libero. Aenean nulla lorem, tincidunt id turpis sit amet,
placerat dignissim ipsum. Duis faucibus magna nec purus sagittis, commodo porta tortor eleifend. Curabitur efficitur, nisl ac elementum condimentum, orci ipsum maximus tortor, at euismod leo libero egestas lacus. Phasellus porta posuere viverra.</p>
<p class="page-break-before">In vehicula ultricies ante. Integer eu sodales nisl. In quis arcu fermentum eros bibendum luctus. Mauris ut hendrerit massa. Curabitur in velit quam. In hac habitasse platea dictumst. Phasellus tincidunt eleifend metus sit amet porta. Pellentesque a
luctus urna, ac fermentum purus. Fusce imperdiet convallis erat non consequat. Etiam id lectus urna. Proin auctor dignissim dictum. Vestibulum dictum pharetra mi et consectetur. Curabitur pellentesque consequat dapibus. Cras tempor nisl non arcu sodales,
sit amet cursus libero pulvinar. Sed feugiat mauris turpis, sit amet aliquam enim elementum quis. Nam rhoncus augue in nisl scelerisque hendrerit. Nullam sed condimentum tortor. Proin vulputate iaculis dui et commodo. Nam sit amet nisl vel libero tempus
feugiat quis a magna. Pellentesque et sem est. Aenean cursus pulvinar leo, non vulputate eros pharetra non. Praesent sit amet elit sem. Sed molestie orci ipsum, sed convallis est hendrerit ac. Vivamus id sem vehicula quam fermentum blandit. Vestibulum
convallis justo et viverra fermentum. Suspendisse ut enim quis ligula molestie sagittis at non augue. Ut sed elit a ex vehicula luctus. Integer vitae orci ut sem pellentesque eleifend ut feugiat diam. Quisque ornare urna tellus, a pellentesque sem tincidunt
et. Curabitur accumsan sollicitudin leo non blandit. Phasellus tortor mi, elementum ut pharetra sed, pellentesque non ipsum. Quisque sagittis nulla ac lacus varius sollicitudin. Fusce viverra malesuada magna, vel tempus arcu volutpat non. Nullam elementum
lacinia diam, at pharetra nulla fringilla eu. Aliquam erat volutpat. Aliquam tempor commodo magna a aliquet. Ut nec mauris id tellus iaculis aliquam. Morbi nisl magna, lacinia quis lobortis ac, fringilla at mauris. Proin nec est in elit suscipit malesuada
sed eget nibh. Vivamus vel luctus felis. Aliquam quis dignissim massa, ut consequat elit. Praesent at ultrices metus. Nam sit amet volutpat nibh. Nunc lacinia nibh at elit aliquam varius. Donec vel diam euismod, elementum lectus nec, fermentum nibh.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In molestie est nec sem pretium ultrices. Aliquam pretium sem turpis, hendrerit eleifend orci euismod eu. Vivamus at lacus mattis, luctus nulla non, ullamcorper
massa. Donec non metus nec libero tempus dictum tempus et sapien. Aenean id placerat orci. Integer tempor quam ac venenatis vestibulum. Fusce efficitur tellus sed ultricies euismod. Phasellus scelerisque quam lobortis, pulvinar libero at, euismod erat.
Integer a mauris magna. Quisque nunc nisi, malesuada non eros sit amet, viverra ullamcorper ante. Vivamus a elit eu nibh ornare pulvinar. Integer nec mauris eu nulla porta pharetra a sed augue. Maecenas vel ullamcorper dui. Vivamus suscipit ultricies
dolor in finibus. Quisque vestibulum commodo turpis, at aliquet nisi ultrices sed. Sed condimentum, turpis eu egestas tincidunt, neque massa lobortis lacus, in luctus leo sem sit amet dolor. Ut non massa et erat rhoncus scelerisque vel in dolor. Ut
eget cursus nunc. Integer leo metus, gravida et neque ut, dictum laoreet ipsum. Suspendisse id facilisis sem, vel sagittis lectus. Quisque ultricies eleifend quam, a volutpat nunc ultricies nec. Nam magna elit, vestibulum id venenatis quis, iaculis
vel mi. Suspendisse cursus nibh quis tortor tincidunt, vitae pulvinar tortor volutpat. Integer vel luctus sapien. Phasellus tincidunt ullamcorper dui, a pulvinar libero mattis vel. Morbi sed rutrum nibh. Mauris aliquet cursus tortor sed scelerisque.
Sed metus neque, condimentum eget dapibus ac, volutpat eget tortor. Sed elit magna, posuere non ex at, facilisis luctus nisi. Nunc tempor sem porttitor faucibus convallis. Nulla vel dapibus enim. Vivamus at facilisis mi. Donec eu elementum lorem, vel
luctus orci. Cras faucibus tempus tempus. Vestibulum commodo nulla eget tempor tincidunt. Maecenas quis magna at dolor pharetra rutrum. Nulla facilisi. Quisque nibh erat, efficitur in odio sit amet, sagittis egestas mauris. Mauris molestie aliquam sapien
quis faucibus. Ut non egestas orci, vel imperdiet nunc. Integer sit amet elit a diam mollis blandit. Curabitur fringilla varius imperdiet. Curabitur in felis lacus. Curabitur ornare, lorem vel aliquam blandit, diam urna sollicitudin nisi, eget ultrices
quam augue a augue. Donec porta urna augue, in tempor lorem malesuada ac. Donec sit amet leo posuere, mollis nibh quis, eleifend arcu. Cras eu auctor massa, quis tristique odio. Phasellus commodo elementum fermentum. Sed sit amet efficitur turpis. Curabitur
feugiat fringilla nibh nec aliquam. Proin viverra dolor id ligula sodales, maximus varius lacus imperdiet. Fusce suscipit eros quis condimentum efficitur. Vivamus dapibus rutrum nibh eu ullamcorper. Donec dignissim ante sit amet lectus bibendum bibendum.
Aliquam nibh massa, porttitor tincidunt fermentum id, ultricies eget metus. Duis eu turpis at sapien efficitur bibendum eu et nisl. Pellentesque lectus ipsum, pharetra ut pulvinar vitae, euismod sed nunc. Fusce suscipit augue dapibus interdum accumsan.
Maecenas dapibus lobortis tempus. Sed mattis est eget risus imperdiet maximus. Suspendisse nec suscipit ex. Etiam at felis sed arcu congue finibus a ut quam. Praesent ultricies, nulla vitae ornare varius, justo massa condimentum mauris, ut laoreet ex
urna id arcu. Proin et pulvinar diam, at finibus erat. Cras accumsan, nisi vitae sollicitudin bibendum, nisl turpis pretium purus, pulvinar feugiat massa est quis erat. Fusce nibh arcu, porttitor nec ante a, interdum porta neque. Curabitur in porttitor
nisl, ac auctor ipsum. Proin id orci sagittis nulla posuere tempus quis eget ipsum. Donec lobortis pellentesque est ut dignissim. Nunc interdum consectetur nulla non dapibus. Vivamus non iaculis ipsum. Curabitur condimentum vehicula dui id venenatis.
Proin semper, eros quis egestas accumsan, orci leo tristique metus, vel dapibus nisi massa id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent auctor massa nec justo tristique porttitor. Sed
in pretium nibh. Nam pretium ante volutpat laoreet vulputate. In vulputate ante magna, vitae facilisis diam semper et.</p>
<svg class="page-break-before"></svg>
<svg class="page-break-before" width="810" height="610"><g transform="translate(5,5)"><g><g transform="translate (0, 600) rotate(-90)"><rect x="0" y="0" width="60" height="60" style="fill: rgb(3, 129, 0);"></rect><rect x="0" y="60" width="60" height="60" style="fill: rgb(8, 132, 0);"></rect><rect x="0" y="120" width="60" height="60" style="fill: rgb(13, 134, 0);"></rect><rect x="0" y="180" width="60" height="60" style="fill: rgb(18, 137, 0);"></rect><rect x="0" y="240" width="60" height="60" style="fill: rgb(23, 139, 0);"></rect><rect x="0" y="300" width="60" height="60" style="fill: rgb(28, 142, 0);"></rect><rect x="0" y="360" width="60" height="60" style="fill: rgb(33, 145, 0);"></rect><rect x="0" y="420" width="60" height="60" style="fill: rgb(38, 147, 0);"></rect><rect x="0" y="480" width="60" height="60" style="fill: rgb(43, 150, 0);"></rect><rect x="0" y="540" width="60" height="60" style="fill: rgb(48, 152, 0);"></rect><rect x="60" y="0" width="60" height="60" style="fill: rgb(8, 132, 0);"></rect><rect x="60" y="60" width="60" height="60" style="fill: rgb(23, 139, 0);"></rect><rect x="60" y="120" width="60" height="60" style="fill: rgb(38, 147, 0);"></rect><rect x="60" y="180" width="60" height="60" style="fill: rgb(54, 155, 0);"></rect><rect x="60" y="240" width="60" height="60" style="fill: rgb(69, 162, 0);"></rect><rect x="60" y="300" width="60" height="60" style="fill: rgb(84, 170, 0);"></rect><rect x="60" y="360" width="60" height="60" style="fill: rgb(99, 178, 0);"></rect><rect x="60" y="420" width="60" height="60" style="fill: rgb(115, 185, 0);"></rect><rect x="60" y="480" width="60" height="60" style="fill: rgb(130, 193, 0);"></rect><rect x="60" y="540" width="60" height="60" style="fill: rgb(145, 200, 0);"></rect><rect x="120" y="0" width="60" height="60" style="fill: rgb(13, 134, 0);"></rect><rect x="120" y="60" width="60" height="60" style="fill: rgb(38, 147, 0);"></rect><rect x="120" y="120" width="60" height="60" style="fill: rgb(64, 160, 0);"></rect><rect x="120" y="180" width="60" height="60" style="fill: rgb(89, 172, 0);"></rect><rect x="120" y="240" width="60" height="60" style="fill: rgb(115, 185, 0);"></rect><rect x="120" y="300" width="60" height="60" style="fill: rgb(140, 198, 0);"></rect><rect x="120" y="360" width="60" height="60" style="fill: rgb(166, 211, 0);"></rect><rect x="120" y="420" width="60" height="60" style="fill: rgb(191, 223, 0);"></rect><rect x="120" y="480" width="60" height="60" style="fill: rgb(217, 236, 0);"></rect><rect x="120" y="540" width="60" height="60" style="fill: rgb(242, 249, 0);"></rect><rect x="180" y="0" width="60" height="60" style="fill: rgb(18, 137, 0);"></rect><rect x="180" y="60" width="60" height="60" style="fill: rgb(54, 155, 0);"></rect><rect x="180" y="120" width="60" height="60" style="fill: rgb(89, 172, 0);"></rect><rect x="180" y="180" width="60" height="60" style="fill: rgb(125, 190, 0);"></rect><rect x="180" y="240" width="60" height="60" style="fill: rgb(161, 208, 0);"></rect><rect x="180" y="300" width="60" height="60" style="fill: rgb(196, 226, 0);"></rect><rect x="180" y="360" width="60" height="60" style="fill: rgb(232, 244, 0);"></rect><rect x="180" y="420" width="60" height="60" style="fill: rgb(255, 251, 0);"></rect><rect x="180" y="480" width="60" height="60" style="fill: rgb(255, 239, 0);"></rect><rect x="180" y="540" width="60" height="60" style="fill: rgb(255, 227, 0);"></rect><rect x="240" y="0" width="60" height="60" style="fill: rgb(23, 139, 0);"></rect><rect x="240" y="60" width="60" height="60" style="fill: rgb(69, 162, 0);"></rect><rect x="240" y="120" width="60" height="60" style="fill: rgb(115, 185, 0);"></rect><rect x="240" y="180" width="60" height="60" style="fill: rgb(161, 208, 0);"></rect><rect x="240" y="240" width="60" height="60" style="fill: rgb(207, 231, 0);"></rect><rect x="240" y="300" width="60" height="60" style="fill: rgb(252, 254, 0);"></rect><rect x="240" y="360" width="60" height="60" style="fill: rgb(255, 241, 0);"></rect><rect x="240" y="420" width="60" height="60" style="fill: rgb(255, 225, 0);"></rect><rect x="240" y="480" width="60" height="60" style="fill: rgb(255, 210, 0);"></rect><rect x="240" y="540" width="60" height="60" style="fill: rgb(255, 195, 0);"></rect><rect x="300" y="0" width="60" height="60" style="fill: rgb(28, 142, 0);"></rect><rect x="300" y="60" width="60" height="60" style="fill: rgb(84, 170, 0);"></rect><rect x="300" y="120" width="60" height="60" style="fill: rgb(140, 198, 0);"></rect><rect x="300" y="180" width="60" height="60" style="fill: rgb(196, 226, 0);"></rect><rect x="300" y="240" width="60" height="60" style="fill: rgb(252, 254, 0);"></rect><rect x="300" y="300" width="60" height="60" style="fill: rgb(255, 237, 0);"></rect><rect x="300" y="360" width="60" height="60" style="fill: rgb(255, 218, 0);"></rect><rect x="300" y="420" width="60" height="60" style="fill: rgb(255, 200, 0);"></rect><rect x="300" y="480" width="60" height="60" style="fill: rgb(255, 181, 0);"></rect><rect x="300" y="540" width="60" height="60" style="fill: rgb(255, 162, 0);"></rect><rect x="360" y="0" width="60" height="60" style="fill: rgb(33, 145, 0);"></rect><rect x="360" y="60" width="60" height="60" style="fill: rgb(99, 178, 0);"></rect><rect x="360" y="120" width="60" height="60" style="fill: rgb(166, 211, 0);"></rect><rect x="360" y="180" width="60" height="60" style="fill: rgb(232, 244, 0);"></rect><rect x="360" y="240" width="60" height="60" style="fill: rgb(255, 241, 0);"></rect><rect x="360" y="300" width="60" height="60" style="fill: rgb(255, 218, 0);"></rect><rect x="360" y="360" width="60" height="60" style="fill: rgb(255, 196, 0);"></rect><rect x="360" y="420" width="60" height="60" style="fill: rgb(255, 174, 0);"></rect><rect x="360" y="480" width="60" height="60" style="fill: rgb(255, 152, 0);"></rect><rect x="360" y="540" width="60" height="60" style="fill: rgb(255, 130, 0);"></rect><rect x="420" y="0" width="60" height="60" style="fill: rgb(38, 147, 0);"></rect><rect x="420" y="60" width="60" height="60" style="fill: rgb(115, 185, 0);"></rect><rect x="420" y="120" width="60" height="60" style="fill: rgb(191, 223, 0);"></rect><rect x="420" y="180" width="60" height="60" style="fill: rgb(255, 251, 0);"></rect><rect x="420" y="240" width="60" height="60" style="fill: rgb(255, 225, 0);"></rect><rect x="420" y="300" width="60" height="60" style="fill: rgb(255, 200, 0);"></rect><rect x="420" y="360" width="60" height="60" style="fill: rgb(255, 174, 0);"></rect><rect x="420" y="420" width="60" height="60" style="fill: rgb(255, 149, 0);"></rect><rect x="420" y="480" width="60" height="60" style="fill: rgb(255, 123, 0);"></rect><rect x="420" y="540" width="60" height="60" style="fill: rgb(255, 98, 0);"></rect><rect x="480" y="0" width="60" height="60" style="fill: rgb(43, 150, 0);"></rect><rect x="480" y="60" width="60" height="60" style="fill: rgb(130, 193, 0);"></rect><rect x="480" y="120" width="60" height="60" style="fill: rgb(217, 236, 0);"></rect><rect x="480" y="180" width="60" height="60" style="fill: rgb(255, 239, 0);"></rect><rect x="480" y="240" width="60" height="60" style="fill: rgb(255, 210, 0);"></rect><rect x="480" y="300" width="60" height="60" style="fill: rgb(255, 181, 0);"></rect><rect x="480" y="360" width="60" height="60" style="fill: rgb(255, 152, 0);"></rect><rect x="480" y="420" width="60" height="60" style="fill: rgb(255, 123, 0);"></rect><rect x="480" y="480" width="60" height="60" style="fill: rgb(255, 94, 0);"></rect><rect x="480" y="540" width="60" height="60" style="fill: rgb(255, 65, 0);"></rect><rect x="540" y="0" width="60" height="60" style="fill: rgb(48, 152, 0);"></rect><rect x="540" y="60" width="60" height="60" style="fill: rgb(145, 200, 0);"></rect><rect x="540" y="120" width="60" height="60" style="fill: rgb(242, 249, 0);"></rect><rect x="540" y="180" width="60" height="60" style="fill: rgb(255, 227, 0);"></rect><rect x="540" y="240" width="60" height="60" style="fill: rgb(255, 195, 0);"></rect><rect x="540" y="300" width="60" height="60" style="fill: rgb(255, 162, 0);"></rect><rect x="540" y="360" width="60" height="60" style="fill: rgb(255, 130, 0);"></rect><rect x="540" y="420" width="60" height="60" style="fill: rgb(255, 98, 0);"></rect><rect x="540" y="480" width="60" height="60" style="fill: rgb(255, 65, 0);"></rect><rect x="540" y="540" width="60" height="60" style="fill: rgb(255, 33, 0);"></rect></g><line class="quadrant quadrant-line" x1="300" y1="0" x2="300" y2="600" style="stroke-width: 1.5px; stroke: rgb(0, 0, 0);"></line><line class="quadrant quadrant-line" x1="0" y1="300" x2="600" y2="300" style="stroke-width: 1.5px; stroke: rgb(0, 0, 0);"></line><text class="quadrant quadrant-text" x="150" y="20">Quadrant 1</text><text class="quadrant quadrant-text" x="450" y="20">Quadrant 2</text><text class="quadrant quadrant-text" x="150" y="320">Quadrant 3</text><text class="quadrant quadrant-text" x="450" y="320">Quadrant 4</text><g><circle class="point" r="5" cy="164.55852842249973" cx="284.0493498464985" style="fill: rgb(158, 202, 225);"></circle><circle class="point" r="5" cy="318.731438296222" cx="197.9927692869192" style="fill: rgb(158, 202, 225);"></circle><circle class="point" r="5" cy="168.3378583684512" cx="287.7977941064196" style="fill: rgb(198, 219, 239);"></circle><circle class="point" r="5" cy="579.4191054110588" cx="297.61096076724556" style="fill: rgb(230, 85, 13);"></circle><circle class="point" r="5" cy="487.88903424986006" cx="532.0077637996524" style="fill: rgb(230, 85, 13);"></circle><circle class="point" r="5" cy="353.68937461940135" cx="312.4272214848305" style="fill: rgb(253, 141, 60);"></circle><circle class="point" r="5" cy="583.8026500038668" cx="261.3549733769653" style="fill: rgb(253, 141, 60);"></circle><circle class="point" r="5" cy="491.40237763049385" cx="508.7216252393391" style="fill: rgb(253, 174, 107);"></circle><circle class="point" r="5" cy="169.08437490947074" cx="4.5027468106180635" style="fill: rgb(49, 130, 189);"></circle><circle class="point" r="5" cy="317.09571943017085" cx="181.72265752404385" style="fill: rgb(253, 208, 162);"></circle><circle class="point" r="5" cy="142.98252241694234" cx="121.26382953432015" style="fill: rgb(49, 163, 84);"></circle><circle class="point" r="5" cy="567.5130035598679" cx="38.01519958334336" style="fill: rgb(116, 196, 118);"></circle><circle class="point" r="5" cy="238.79626199481868" cx="376.65848236782347" style="fill: rgb(161, 217, 155);"></circle><circle class="point" r="5" cy="49.556628073048614" cx="367.88149495479206" style="fill: rgb(49, 130, 189);"></circle><circle class="point" r="5" cy="576.9814463532128" cx="493.355917998854" style="fill: rgb(158, 202, 225);"></circle><circle class="point" r="5" cy="509.73698723257553" cx="284.6026682948774" style="fill: rgb(253, 141, 60);"></circle><circle class="point" r="5" cy="507.26466534721027" cx="449.1008437446909" style="fill: rgb(116, 196, 118);"></circle><circle class="point" r="5" cy="19.15949324821602" cx="2.5345731367926394" style="fill: rgb(199, 233, 192);"></circle><circle class="point" r="5" cy="96.01777916232592" cx="201.5973906221893" style="fill: rgb(158, 202, 225);"></circle><circle class="point" r="5" cy="177.8844961637088" cx="576.7272712795512" style="fill: rgb(49, 163, 84);"></circle></g><g><text class="point-text" y="164.55852842249973" x="284.0493498464985" transform="translate (10 5)">This is some text</text><text class="point-text" y="318.731438296222" x="197.9927692869192" transform="translate (10 5)">This is some text</text><text class="point-text" y="168.3378583684512" x="287.7977941064196" transform="translate (10 5)">This is some text</text><text class="point-text" y="579.4191054110588" x="297.61096076724556" transform="translate (10 5)">This is some text</text><text class="point-text" y="487.88903424986006" x="532.0077637996524" transform="translate (10 5)">This is some text</text><text class="point-text" y="353.68937461940135" x="312.4272214848305" transform="translate (10 5)">This is some text</text><text class="point-text" y="583.8026500038668" x="261.3549733769653" transform="translate (10 5)">This is some text</text><text class="point-text" y="491.40237763049385" x="508.7216252393391" transform="translate (10 5)">This is some text</text><text class="point-text" y="169.08437490947074" x="4.5027468106180635" transform="translate (10 5)">This is some text</text><text class="point-text" y="317.09571943017085" x="181.72265752404385" transform="translate (10 5)">This is some text</text><text class="point-text" y="142.98252241694234" x="121.26382953432015" transform="translate (10 5)">This is some text</text><text class="point-text" y="567.5130035598679" x="38.01519958334336" transform="translate (10 5)">This is some text</text><text class="point-text" y="238.79626199481868" x="376.65848236782347" transform="translate (10 5)">This is some text</text><text class="point-text" y="49.556628073048614" x="367.88149495479206" transform="translate (10 5)">This is some text</text><text class="point-text" y="576.9814463532128" x="493.355917998854" transform="translate (10 5)">This is some text</text><text class="point-text" y="509.73698723257553" x="284.6026682948774" transform="translate (10 5)">This is some text</text><text class="point-text" y="507.26466534721027" x="449.1008437446909" transform="translate (10 5)">This is some text</text><text class="point-text" y="19.15949324821602" x="2.5345731367926394" transform="translate (10 5)">This is some text</text><text class="point-text" y="96.01777916232592" x="201.5973906221893" transform="translate (10 5)">This is some text</text><text class="point-text" y="177.8844961637088" x="576.7272712795512" transform="translate (10 5)">This is some text</text></g><path d="M480,0L480,20C480,40,480,80,500,100C520,120,560,120,580,120L600,120" class="curve curve-line" stroke-width="2" stroke="#000" style="fill: none;"></path><path d="M330,0L330,45C330,90,330,180,375,225C420,270,510,270,555,270L600,270" class="curve curve-line" stroke-width="2" stroke="#000" style="fill: none;"></path><text class="curve curve-label" x="610" y="119.99999999999997" style="font-weight: 600;">High Risk</text><text class="curve curve-label" x="610" y="270" style="font-weight: 600;">Medium Risk</text></g></g></svg>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- <script src="bower_components/d3/d3.min.js"></script> -->
<!-- <script src="gradient.js"></script> -->
<script src="svg.js"></script>
<script src='bower_components/pdfmake/build/pdfmake.min.js'></script>
<script src='bower_components/pdfmake/build/vfs_fonts.js'></script>
<script>
document.getElementById('make-pdf').addEventListener('click', function(e) {
e.preventDefault();
function getSvgUri(element) {
return new Promise(function(resolve, reject) {
svgAsPngUri(element, {}, function(uri) {
resolve(uri);
});
});
}
function getElementContent(element) {
return new Promise(function(resolve, reject) {
const nodeName = element.nodeName.toLowerCase();
const hasPageBreakAfter = element.classList.contains('page-break-after');
const hasPageBreakBefore = element.classList.contains('page-break-before');
const content = {};
if (hasPageBreakAfter) $.extend(content, {
pageBreak: 'after'
});
if (hasPageBreakBefore) $.extend(content, {
pageBreak: 'before'
});
if (['p', 'h1', 'h2', 'h3'].indexOf(nodeName) >= 0) {
resolve($.extend(content, {
text: element.innerText,
style: nodeName
}));
} else if (nodeName === 'svg') {
getSvgUri(element).then(function(uri) {
resolve($.extend(content, {
image: uri,
width: 590
}));
});
}
});
}
function getContent() {
const elements = Array.prototype.slice.call(document.querySelectorAll("p, h1, h2, h3, svg"));
return Promise.all(elements.map(getElementContent));
}
getContent().then(function(content) {
const docDefinition = {
pageOrientation: 'portrait',
pageSize: 'A4',
header: {
text: 'This is the header',
style: 'header'
},
footer: function(currentPage, pageCount) {
return {
text: currentPage.toString() + ' of ' + pageCount,
alignment: 'right',
style: 'footer'
};
},
content: content,
styles: {
h1: {
fontSize: 30,
},
h2: {
fontSize: 25,
},
h3: {
fontSize: 20,
},
footer: {
margin: [20, 20]
},
header: {
margin: [10, 10, 5, 5]
}
}
};
pdfMake.createPdf(docDefinition).open();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment