WhatCanFingerprint/src/components/ExportButton.svelte
2025-08-29 00:19:10 +03:00

76 lines
1.5 KiB
Svelte

<script>
import { t } from '../lib/i18n'
export let fingerprint
export let refreshKey = 0
function exportData() {
const dataStr = JSON.stringify(fingerprint, null, 2)
const dataBlob = new Blob([dataStr], { type: 'application/json' })
const url = URL.createObjectURL(dataBlob)
const link = document.createElement('a')
link.href = url
link.download = `fingerprint-${new Date().toISOString().slice(0, 19)}.json`
link.click()
URL.revokeObjectURL(url)
}
function copyToClipboard() {
const dataStr = JSON.stringify(fingerprint, null, 2)
navigator.clipboard.writeText(dataStr).then(() => {
alert(t('copied'))
}).catch(() => {
alert(t('copyError'))
})
}
</script>
{#key refreshKey}
<div class="export-buttons">
<button on:click={exportData} class="btn btn-primary">
{t('exportJson')}
</button>
<button on:click={copyToClipboard} class="btn btn-secondary">
{t('copy')}
</button>
</div>
{/key}
<style>
.export-buttons {
display: flex;
gap: 10px;
justify-content: center;
margin: 20px 0;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #545b62;
}
</style>