Add download/export button

This commit is contained in:
Jacob Strieb 2019-06-30 01:25:38 -07:00
parent f67984d66b
commit b7d901b0af
2 changed files with 7 additions and 3 deletions

View File

@ -43,7 +43,7 @@ ${data["html"]}
/* Return a link to view the page */ /* Return a link to view the page */
function getViewLink(pageData) { function getViewLink(pageData) {
return `../#${window.btoa(encodeURIComponent(pageData))}`; return `../#${window.btoa(pageData)}`;
} }
@ -55,7 +55,7 @@ function update() {
"html" : document.getElementById("html").value "html" : document.getElementById("html").value
}; };
var html = getHTML(data); var html = encodeURIComponent(getHTML(data));
// Save encoded page data to the URL // Save encoded page data to the URL
window.location.hash = "#" + window.btoa(JSON.stringify(data)); window.location.hash = "#" + window.btoa(JSON.stringify(data));
@ -63,8 +63,11 @@ function update() {
// Update the URL for the "Get Link" button // Update the URL for the "Get Link" button
document.getElementById("getLinkLink").href = getViewLink(html); document.getElementById("getLinkLink").href = getViewLink(html);
// Update the download link
document.getElementById("downloadLink").href = `data:text/html,${html}`
// Update the <iframe> to display the generated page // Update the <iframe> to display the generated page
window.frames[0].location.replace(`data:text/html,${encodeURIComponent(html)}`); window.frames[0].location.replace(`data:text/html,${html}`);
} }
/* Show a prompt with the HTML so the user can copy the code */ /* Show a prompt with the HTML so the user can copy the code */

View File

@ -16,6 +16,7 @@
<div id="buttons"> <div id="buttons">
<button><a id="getLinkLink" href="" target="_blank">Get Link</a></button> <button><a id="getLinkLink" href="" target="_blank">Get Link</a></button>
<button onclick="showCopyCodePrompt()">Copy Code</button> <button onclick="showCopyCodePrompt()">Copy Code</button>
<button><a id="downloadLink" href="" target="_blank" download="export.html">Download Code</a></button>
</div> </div>
<iframe></iframe> <iframe></iframe>