Modern yöntem
Web Share API'nin share()
yöntemini kullanma
Dosya paylaşmak için navigator.share()
numaralı telefonu arayın. Dosyaların navigator.canShare()
ile paylaşılıp paylaşılamayacağını her zaman kontrol etmeniz ve share()
yöntemini çağırmadan önce sitenizin HTTPS kullandığından emin olmanız gerektiğini unutmayın.
// Assume `blob` is a PNG image file.
const data = {
files: [
new File([blob], 'image.png', {
type: blob.type,
}),
],
title: 'My title',
text: 'My text',
};
if (navigator.canShare(data)) {
await navigator.share(data);
}
Klasik yöntem
Web Paylaşımı API'sı desteklenmiyorsa kullanıcıya sunulabilecek bir sonraki en iyi şey, kullanıcının dosyayı manuel olarak (örneğin, e-posta, mesajlaşma uygulaması veya çevrimiçi sosyal ağ uygulaması aracılığıyla) paylaşabilmesi için onu indirmesine izin vermektir.
Progresif geliştirme
Aşağıdaki yöntem, tarayıcı desteklediğinde ve verilerin desteklenen dosya türlerine göre paylaşılabildiği durumlarda Web Share API'yi kullanır. Aksi takdirde, dosyayı indirmeye devam eder.
const button = document.querySelector('button');
const img = document.querySelector('img');
// Feature detection
const webShareSupported = 'canShare' in navigator;
// Update the button action text.
button.textContent = webShareSupported ? 'Share' : 'Download';
const shareOrDownload = async (blob, fileName, title, text) => {
// Using the Web Share API.
if (webShareSupported) {
const data = {
files: [
new File([blob], fileName, {
type: blob.type,
}),
],
title,
text,
};
if (navigator.canShare(data)) {
try {
await navigator.share(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
} finally {
return;
}
}
}
// Fallback implementation.
const a = document.createElement('a');
a.download = fileName;
a.style.display = 'none';
a.href = URL.createObjectURL(blob);
a.addEventListener('click', () => {
setTimeout(() => {
URL.revokeObjectURL(a.href);
a.remove();
}, 1000)
});
document.body.append(a);
a.click();
};
button.addEventListener('click', async () => {
const blob = await fetch(img.src).then(res => res.blob());
await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
});
Daha fazla bilgi
- MDN'de Web Paylaşımı API'si
- Web Paylaşımı API'si ile işletim sistemi paylaşımı kullanıcı arayüzü ile entegrasyon
Demo
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title></title>
<link rel="stylesheet" href="style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script src="script.js" type="module"></script> -->
</head>
<body>
<h1>Share a file</h1>
<img
width="200"
height="200"
alt="A cat walking in the snow."
src="cat.png"
/>
<button type=button></button>
</body>
</html>
CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
img,
video {
height: auto;
max-width: 100%;
display: block;
}
button {
margin: 1rem;
}
JS
const button = document.querySelector('button');
const img = document.querySelector('img');
const webShareSupported = 'canShare' in navigator;
button.textContent = webShareSupported ? 'Share' : 'Download';
const shareOrDownload = async (blob, fileName, title, text) => {
if (webShareSupported) {
const data = {
files: [
new File([blob], fileName, {
type: blob.type,
}),
],
title,
text,
};
if (navigator.canShare(data)) {
try {
await navigator.share(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
} finally {
return;
}
}
}
// Fallback
const a = document.createElement('a');
a.download = fileName;
a.style.display = 'none';
a.href = URL.createObjectURL(blob);
a.addEventListener('click', () => {
setTimeout(() => {
URL.revokeObjectURL(a.href);
a.remove();
}, 1000)
});
document.body.append(a);
a.click();
};
button.addEventListener('click', async () => {
const blob = await fetch(img.src).then(res => res.blob());
await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
});