-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathindex.html
More file actions
167 lines (147 loc) · 22 KB
/
index.html
File metadata and controls
167 lines (147 loc) · 22 KB
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Export Service | BALKANGraph</title>
<style>
html{
background-color: #323237;
text-align: center;
padding-top: 200px;
}
.logo {
width: 45px;
height: 45px;
display: inline-block;
}
#exportUrl{
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
input[type='button'] {
box-sizing: border-box;
border: none;
width: 400px;
height: 40px;
font-size: 18px;
margin-top: 21px;
background-color: #039be5;
color: #fff;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
cursor: pointer;
margin-bottom: 80px;
}
#pngBtn { background-color: #F57C00;}
label{
color: white;
}
input[type="text"], label, textarea{
display: none;
}
#exportUrl{
color: white;
}
</style>
</head>
<body>
<svg class="logo">
<circle cx="12" cy="22" r="12" fill="#039BE5"></circle>
<circle cx="33" cy="14" r="10" fill="#FFCA28"></circle>
<circle cx="30" cy="32" r="8" fill="#F57C00"></circle>
</svg>
<br />
<input id="pdfBtn" value="Test Export to PDF" type="button">
<input id="pngBtn" value="Test Export to PNG" type="button"/>
<br />
<div id="exportUrl"></div>
<br />
<div id="img"></div>
<label for="w">width</label>
<input id="w" type="text" value="1180" />
<label for="h">height</label>
<input id="h" type="text" value="855" />
<textarea id="svg" style="width: 1000px; height: 700px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:block;background-color: #2E2E2E;" width="1180" height="855" viewBox="-30,-30,1180,855"><defs><linearGradient id="2nxjmf4ubqd3lz0qv5a3sr" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#FDFDFD;stop-opacity:1"></stop><stop offset="100%" style="stop-color:#C0C0C0;stop-opacity:1"></stop></linearGradient><filter id="0o7iompbey7r569dtrvgjjg" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5"></feOffset><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur><feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend></filter><linearGradient id="oc6bxknllfaqpl8n1yzyxj" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#646464;stop-opacity:1"></stop><stop offset="100%" style="stop-color:#363636;stop-opacity:1"></stop></linearGradient> <filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix></filter><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="isla-shadow"><feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g node-id="1" style="opacity: 1" transform="matrix(1,0,0,1,435,0)" class="node" level="0"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Jack Hill</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Chairman & CEO</text><clipPath id="8pps5pc4or2bj471phduo"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#8pps5pc4or2bj471phduo)" xlink:href="https://balkangraph.com/js/img/1.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[1][2]" class="link " level="0"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M560,120 560,150 125,150 L125,180"></path><g transform="matrix(1,0,0,1,125,166) rotate(0)"><text text-anchor="middle" fill="#aeaeae" width="290" x="0" y="0" style="font-size:10px;">10/10/2018</text></g></g><g link-id="[1][3]" class="link " level="0"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M560,120 560,150 560,150 L560,180"></path></g><g link-id="[1][4]" class="link " level="0"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M560,120 560,150 995,150 L995,180"></path></g><g node-id="2" style="opacity: 1" transform="matrix(1,0,0,1,0,180)" class="node" level="1"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Lexie Cole</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">QA Lead</text><clipPath id="r0zgsw0zmwhg77q5tza4ja"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#r0zgsw0zmwhg77q5tza4ja)" xlink:href="https://balkangraph.com/js/img/2.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[2][5]" class="link " level="1"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M125,300 125,330 125,330 L125,360"></path></g><g node-id="3" style="opacity: 1" transform="matrix(1,0,0,1,435,180)" class="node" level="1"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Janae Barrett</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Technical Director</text><clipPath id="q404888iswfxa2b38mwkk8"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#q404888iswfxa2b38mwkk8)" xlink:href="https://balkangraph.com/js/img/3.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[3][8]" class="link " level="1"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M560,300 560,330 415,330 L415,360"></path></g><g link-id="[3][9]" class="link " level="1"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M560,300 560,330 705,330 L705,360"></path></g><g node-id="4" style="opacity: 1" transform="matrix(1,0,0,1,870,180)" class="node" level="1"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Aaliyah Webb</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Manager</text><clipPath id="k474aoji5dnpkmk6ja577h"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#k474aoji5dnpkmk6ja577h)" xlink:href="https://balkangraph.com/js/img/4.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[4][14]" class="link " level="1"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M995,300 995,330 995,330 L995,360"></path></g><g node-id="5" style="opacity: 1" transform="matrix(1,0,0,1,0,360)" class="node tree-layout" level="2"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Elliot Ross</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">QA</text><clipPath id="fxzazmrmc8qbqwf3g5z74m"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#fxzazmrmc8qbqwf3g5z74m)" xlink:href="https://balkangraph.com/js/img/5.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[5][6]" class="link " level="2"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M125,480 125,487.5 125,487.5 L125,495"></path></g><g node-id="6" style="opacity: 1" transform="matrix(1,0,0,1,0,495)" class="node tree-layout" level="3"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Anahi Gordon</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">QA</text><clipPath id="lw5tbh73c4zgmkl9gn4nn"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#lw5tbh73c4zgmkl9gn4nn)" xlink:href="https://balkangraph.com/js/img/6.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[6][7]" class="link " level="3"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M125,615 125,622.5 125,622.5 L125,630"></path></g><g node-id="7" style="opacity: 1" transform="matrix(1,0,0,1,0,630)" class="node tree-layout" level="4"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Knox Macias</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">QA</text><clipPath id="5ett1ej0l479ax7ke4yqxt"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#5ett1ej0l479ax7ke4yqxt)" xlink:href="https://balkangraph.com/js/img/7.jpg" x="10" y="-15" width="80" height="80"></image></g><g node-id="8" style="opacity: 1" transform="matrix(1,0,0,1,290,360)" class="node" level="2"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Nash Ingram</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">.NET Team Lead</text><clipPath id="lvu99bjpt29y8b1qqliut"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#lvu99bjpt29y8b1qqliut)" xlink:href="https://balkangraph.com/js/img/8.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[8][10]" class="link " level="2"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M415,480 415,510 415,510 L415,540"></path></g><g node-id="9" style="opacity: 1" transform="matrix(1,0,0,1,580,360)" class="node" level="2"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Sage Barnett</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">JS Team Lead</text><clipPath id="umbjsgn1qyr9266hyqkis"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#umbjsgn1qyr9266hyqkis)" xlink:href="https://balkangraph.com/js/img/9.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[9][12]" class="link " level="2"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M705,480 705,510 705,510 L705,540"></path></g><g node-id="10" style="opacity: 1" transform="matrix(1,0,0,1,290,540)" class="node tree-layout" level="3"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Alice Gray</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Programmer</text><clipPath id="lax4949y6nfao5oe9j4je"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#lax4949y6nfao5oe9j4je)" xlink:href="https://balkangraph.com/js/img/10.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[10][11]" class="link " level="3"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M415,660 415,667.5 415,667.5 L415,675"></path></g><g node-id="11" style="opacity: 1" transform="matrix(1,0,0,1,290,675)" class="node tree-layout" level="4"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Anne Ewing</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Programmer</text><clipPath id="a4rrmk5sz96kyp2rzhv8s"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#a4rrmk5sz96kyp2rzhv8s)" xlink:href="https://balkangraph.com/js/img/11.jpg" x="10" y="-15" width="80" height="80"></image></g><g node-id="12" style="opacity: 1" transform="matrix(1,0,0,1,580,540)" class="node tree-layout" level="3"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Reuben Mcleod</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Programmer</text><clipPath id="clctntqcyrllfdx9el8q1"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#clctntqcyrllfdx9el8q1)" xlink:href="https://balkangraph.com/js/img/12.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[12][13]" class="link " level="3"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M705,660 705,667.5 705,667.5 L705,675"></path></g><g node-id="13" style="opacity: 1" transform="matrix(1,0,0,1,580,675)" class="node tree-layout" level="4"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Ariel Wiley</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Programmer</text><clipPath id="jh0314nhxdjsc4u31jwz"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#jh0314nhxdjsc4u31jwz)" xlink:href="https://balkangraph.com/js/img/13.jpg" x="10" y="-15" width="80" height="80"></image></g><g node-id="14" style="opacity: 1" transform="matrix(1,0,0,1,870,360)" class="node tree-layout" level="2"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Lucas West</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Marketer</text><clipPath id="s95kl0q2wmfxzrig8bpggi"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#s95kl0q2wmfxzrig8bpggi)" xlink:href="https://balkangraph.com/js/img/14.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[14][15]" class="link " level="2"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M995,480 995,487.5 995,487.5 L995,495"></path></g><g node-id="15" style="opacity: 1" transform="matrix(1,0,0,1,870,495)" class="node tree-layout" level="3"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Adan Travis</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Designer</text><clipPath id="s8j7eg9smcyo80h27uslf"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#s8j7eg9smcyo80h27uslf)" xlink:href="https://balkangraph.com/js/img/15.jpg" x="10" y="-15" width="80" height="80"></image></g><g link-id="[15][16]" class="link " level="3"><path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M995,615 995,622.5 995,622.5 L995,630"></path></g><g node-id="16" style="opacity: 1" transform="matrix(1,0,0,1,870,630)" class="node tree-layout" level="4"><rect fill="url(#oc6bxknllfaqpl8n1yzyxj)" x="0" y="0" height="120" width="250" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect><text width="235" class="field_0" style="font-size: 18px;" fill="#aeaeae" x="125" y="90" text-anchor="middle">Alex Snider</text><text width="140" class="field_1" style="font-size: 14px;" fill="#aeaeae" x="240" y="30" text-anchor="end">Sales Manager</text><clipPath id="2s0rzfjvkidlpc5vbn3eo"><circle cx="50" cy="25" r="40"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#2s0rzfjvkidlpc5vbn3eo)" xlink:href="https://balkangraph.com/js/img/16.jpg" x="10" y="-15" width="80" height="80"></image></g></svg></textarea>
<br />
<script>
function ajax(url, data, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onload = function (evt) {
if (xhttp.readyState == XMLHttpRequest.DONE) {
if (this.status === 200) {
callback(evt.target.response);
}
}
}
xhttp.open("POST", url, true);
xhttp.responseType = 'arraybuffer';
xhttp.setRequestHeader("Content-Type",
"application/json");
xhttp.send(JSON.stringify(data));
}
function download(type, content, filename) {
var blob = new Blob([content], { type: type });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
document.getElementById("pdfBtn").addEventListener("click", function () {
if (this.style.backgroundColor == "#cccccc") return;
document.getElementById("pdfBtn").style.backgroundColor = "#cccccc";
document.getElementById("pngBtn").style.backgroundColor = "#cccccc";
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
var val = document.getElementById("svg").value;
if (!val) {
alert("Add svg file to the text area");
}
else {
var div = document.createElement("div");
div.innerHTML = val;
ajax("pdf", { filename: "filename.pdf", svg: div.innerHTML, size: { w: w, h: h }}, function (response) {
download("application/pdf", response, "filename.pdf");
document.getElementById("pdfBtn").style.backgroundColor = "#039be5";
document.getElementById("pngBtn").style.backgroundColor = "#F57C00";
});
}
});
document.getElementById("pngBtn").addEventListener("click", function () {
if (this.style.backgroundColor == "#cccccc") return;
document.getElementById("pdfBtn").style.backgroundColor = "#cccccc";
document.getElementById("pngBtn").style.backgroundColor = "#cccccc";
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
var val = document.getElementById("svg").value;
if (!val) {
alert("Add svg file to the text area");
}
else {
var div = document.createElement("div");
div.innerHTML = val;
ajax("png", { filename: "filename.png", svg: div.innerHTML, size: { w: w, h: h } }, function (response) {
download("image/png", response, "filename.png");
document.getElementById("pdfBtn").style.backgroundColor = "#039be5";
document.getElementById("pngBtn").style.backgroundColor = "#F57C00";
});
}
});
var eurl = document.getElementById("exportUrl");
var l = window.location;
eurl.innerHTML = "exportUrl: " + l.protocol + "//" + l.host;
</script>
</body>
</html>