Die moderne Art
share()
-Methode der Web Share API verwenden
Rufen Sie zum Freigeben von Dateien navigator.share()
auf. Du solltest immer prüfen, ob Dateien für navigator.canShare()
freigegeben werden können, und dafür sorgen, dass deine Website HTTPS verwendet, bevor du die Methode share()
aufrufst.
// 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);
}
Die klassische Art
Wenn die Web Share API nicht unterstützt wird, können Nutzer die Datei auch manuell herunterladen, z. B. per E-Mail, über einen Messenger oder eine App für soziale Netzwerke.
Progressive Enhancement
Bei der folgenden Methode wird die Web Share API verwendet, wenn sie vom Browser unterstützt wird und die Daten basierend auf den unterstützten Dateitypen freigegeben werden können. Andernfalls wird die Datei heruntergeladen.
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…');
});
Weitere Informationen
- Web Share API im MDN
- In die Benutzeroberfläche zur Freigabe des Betriebssystems über die Web Share API einbinden
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…');
});