new download button

This commit is contained in:
Maxime Cannoodt 2022-07-04 20:32:28 +02:00
parent 6de41f9947
commit c5c8f08a9a

View File

@ -29,7 +29,8 @@
let plaintext: string; let plaintext: string;
let timeString: string; let timeString: string;
let decryptFailed = false; let decryptFailed = false;
let downloadUrl: string; // let downloadUrl: string;
let downloadRef: HTMLAnchorElement;
onMount(() => { onMount(() => {
if (browser) { if (browser) {
@ -46,18 +47,22 @@
timeString = msToString(diff_ms); timeString = msToString(diff_ms);
} }
$: if (plaintext) { // $: if (plaintext) {
downloadUrl = getDownloadUrl(plaintext); // downloadUrl = downloadMd(plaintext);
} // }
// https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link // https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
function getDownloadUrl(text: string): string { function downloadMd() {
if (plaintext === undefined) return;
// Make sure the browser reads the data as UTF-8 // Make sure the browser reads the data as UTF-8
// https://stackoverflow.com/questions/6672834/specifying-blob-encoding-in-google-chrome // https://stackoverflow.com/questions/6672834/specifying-blob-encoding-in-google-chrome
const BOM = new Uint8Array([0xef, 0xbb, 0xbf]); const BOM = new Uint8Array([0xef, 0xbb, 0xbf]);
const blob = new Blob([BOM, text], { type: 'text/plain' }); const blob = new Blob([BOM, plaintext], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
console.log(url); console.log(url);
downloadRef.href = url;
downloadRef.click();
window.URL.revokeObjectURL(blob);
return url; return url;
} }
@ -86,10 +91,11 @@
<span class="h-5"><IconEncrypted /></span> <span class="h-5"><IconEncrypted /></span>
<span>e2e encrypted | <span>Shared {timeString} ago</span></span> <span>e2e encrypted | <span>Shared {timeString} ago</span></span>
</span> </span>
<a href={downloadUrl} class="flex gap-1.5 uppercase items-center"> <button on:click={downloadMd} class="flex gap-1.5 uppercase items-center hover:underline">
<span>Raw Markdown</span> <span>Raw Markdown</span>
<span class="h-6"><LogoMarkdown /></span> <span class="h-6"><LogoMarkdown /></span>
</a> <a hidden bind:this={downloadRef} href="./">.</a>
</button>
</p> </p>
<MarkdownRenderer {plaintext} /> <MarkdownRenderer {plaintext} />
</div> </div>