วิธีแชร์ไฟล์

พาเลนซ์ เหลียว
Palances Liao

หากต้องการแชร์ไฟล์ โปรดโทรหา navigator.share() โปรดทราบว่าคุณควรตรวจสอบว่าจะแชร์ไฟล์กับ navigator.canShare() ได้หรือไม่ และตรวจสอบว่าเว็บไซต์ใช้ HTTPS อยู่ก่อนที่จะเรียกใช้เมธอด share()

// 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);
}

การสนับสนุนเบราว์เซอร์

  • 89
  • 93
  • 12.1

แหล่งที่มา

วิธีคลาสสิก

สิ่งที่ควรเสนอแก่ผู้ใช้ในกรณีที่ระบบไม่รองรับ Web Share API คือการถอยกลับให้ผู้ใช้ดาวน์โหลดไฟล์ เพื่อให้ผู้ใช้แชร์ไฟล์ด้วยตนเองได้ เช่น แชร์ทางอีเมลหรือผ่าน Messenger หรือแอปโซเชียลเน็ตเวิร์ก

การสนับสนุนเบราว์เซอร์

  • 15
  • 13
  • 20
  • 10.1

แหล่งที่มา

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

วิธีการด้านล่างใช้ Web Share API เมื่อเบราว์เซอร์รองรับและเมื่อแชร์ข้อมูลได้ตามประเภทไฟล์ที่รองรับ มิฉะนั้น เครื่องจะกลับไปที่การดาวน์โหลดไฟล์

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…');
});

อ่านเพิ่มเติม

เดโม

<!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>

       
: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;
}
       

       
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…');
});