Changed the TypeScript input demo to add a download link for bitmap and vector output formats, and stop displaying the SVG XML code.

typescript-javascript/qrcodegen-input-demo.html

@@ -79,7 +79,7 @@
 						<td><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:30em; height:5em"></textarea></td>
 					</tr>
 					<tr>
-						<td><strong>QR Code:</strong></td>
+						<td><strong>QR Code:</strong><br/><a id="download">(download)</a></td>
 						<td>
 							<canvas id="qrcode-canvas" style="padding:1em; background-color:#E8E8E8"></canvas>
 							<svg id="qrcode-svg" style="width:30em; height:30em; padding:1em; background-color:#E8E8E8">
@@ -138,12 +138,6 @@
 						<td>Statistics:</td>
 						<td id="statistics-output" style="white-space:pre"></td>
 					</tr>
-					<tr id="svg-xml-row">
-						<td>SVG XML code:</td>
-						<td>
-							<textarea id="svg-xml-output" readonly="readonly" style="width:100%; max-width:50em; height:15em; font-family:monospace"></textarea>
-						</td>
-					</tr>
 				</tbody>
 			</table>
 		</form>

typescript-javascript/qrcodegen-input-demo.ts

@@ -45,16 +45,15 @@ namespace app {
 		// Show/hide rows based on bitmap/vector image output
 		const bitmapOutput: boolean = getInput("output-format-bitmap").checked;
 		const scaleRow : HTMLElement = getElem("scale-row");
-		const svgXmlRow: HTMLElement = getElem("svg-xml-row");
+		let download = getElem("download") as HTMLAnchorElement;
 		if (bitmapOutput) {
 			scaleRow.style.removeProperty("display");
-			svgXmlRow.style.display = "none";
+			download.download = "qr-code.png";
 		} else {
 			scaleRow.style.display = "none";
-			svgXmlRow.style.removeProperty("display");
+			download.download = "qr-code.svg";
 		}
-		const svgXml = getElem("svg-xml-output") as HTMLTextAreaElement;
+		download.removeAttribute("href");
-		svgXml.value = "";
 		
 		// Reset output images in case of early termination
 		const canvas = getElem("qrcode-canvas") as HTMLCanvasElement;
@@ -96,6 +95,7 @@ namespace app {
 				return;
 			drawCanvas(qr, scale, border, lightColor, darkColor, canvas);
 			canvas.style.removeProperty("display");
+			download.href = canvas.toDataURL("image/png");
 		} else {
 			const code: string = toSvgString(qr, border, lightColor, darkColor);
 			const viewBox: string = (/ viewBox="([^"]*)"/.exec(code) as RegExpExecArray)[1];
@@ -105,7 +105,7 @@ namespace app {
 			(svg.querySelector("rect") as Element).setAttribute("fill", lightColor);
 			(svg.querySelector("path") as Element).setAttribute("fill", darkColor);
 			svg.style.removeProperty("display");
-			svgXml.value = code;
+			download.href = "data:application/svg+xml," + encodeURIComponent(code);
 		}
 		
 		// Returns a string to describe the given list of segments.