如何儲存檔案

湯馬斯 (Thomas Steiner)
Thomas Steiner

處理檔案是在網站上最常見的作業之一。傳統上,使用者必須上傳檔案、進行變更,然後再次下載,而產生副本到「Downloads」資料夾中。使用者現在可以透過 File System Access API 直接開啟檔案、進行修改,並將變更儲存至原始檔案。

如要儲存檔案,請呼叫 showSaveFilePicker(),此方法會傳回 FileSystemFileHandle 的承諾。您可以將所需檔案名稱以 { suggestedName: 'example.txt' } 的形式傳送至方法。

瀏覽器支援

  • 86
  • 86
  • x
  • x

資料來源

經典風格

使用 <a download> 元素

網頁上的 <a download> 元素可讓使用者按一下該元素並下載檔案。這項秘訣現在是透過 JavaScript 將元素以隱含方式插入網頁中,並以程式輔助方式點擊元素。

瀏覽器支援

  • 15
  • 13
  • 20
  • 10.1

資料來源

漸進增強

在支援的情況下,下方方法會使用 File System Access API,否則會改回傳統做法。在這兩種情況下,函式都會儲存檔案,但如果支援 File System Access API,使用者將看到檔案儲存對話方塊,讓使用者選擇檔案儲存位置。

const saveFile = async (blob, suggestedName) => {
 
// Feature detection. The API needs to be supported
 
// and the app not run in an iframe.
 
const supportsFileSystemAccess =
   
'showSaveFilePicker' in window &&
   
(() => {
     
try {
       
return window.self === window.top;
     
} catch {
       
return false;
     
}
   
})();
 
// If the File System Access API is supported…
 
if (supportsFileSystemAccess) {
   
try {
     
// Show the file save dialog.
     
const handle = await showSaveFilePicker({
        suggestedName
,
     
});
     
// Write the blob to the file.
     
const writable = await handle.createWritable();
      await writable
.write(blob);
      await writable
.close();
     
return;
   
} catch (err) {
     
// Fail silently if the user has simply canceled the dialog.
     
if (err.name !== 'AbortError') {
        console
.error(err.name, err.message);
       
return;
     
}
   
}
 
}
 
// Fallback if the File System Access API is not supported…
 
// Create the blob URL.
 
const blobURL = URL.createObjectURL(blob);
 
// Create the `<a download>` element and append it invisibly.
 
const a = document.createElement('a');
  a
.href = blobURL;
  a
.download = suggestedName;
  a
.style.display = 'none';
  document
.body.append(a);
 
// Programmatically click the element.
  a
.click();
 
// Revoke the blob URL and remove the element.
  setTimeout
(() => {
    URL
.revokeObjectURL(blobURL);
    a
.remove();
 
}, 1000);
};

其他資訊

示範

<!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>How to save a file</title>
 
</head>
 
<body>
   
<h1>How to save a file</h1>

   
<label
     
>Text to save
     
<textarea rows="3">
Some sample text for you to save. Feel free to edit this.
</textarea
     
>
   
</label>
   
<label>File name <input class="text" value="example.txt" /></label>
   
<button class="text" type="button">Save text</button>

   
<label
     
>Image to save
     
<img
       
src="https://cdn.glitch.global/75170424-3d76-41d7-ae77-72d0efb0401b/AVIF%20Test%20picture%20(JPEG%20converted%20to%20AVIF%20with%20Convertio).avif?v=1658240752363"
       
alt="Blue flower."
       
width="630"
       
height="420"
   
/></label>
   
<label>File name <input class="img" value="example.avif" /></label>
   
<button class="img" type="button">Save image</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
{
 
max-width: 320px;
 
height: auto;
}

label
,
button
,
textarea
,
input
,
img
{
 
display: block;
 
margin-block: 1rem;
}
       

       
const textarea = document.querySelector('textarea');
const textInput = document.querySelector('input.text');
const textButton = document.querySelector('button.text');

const img = document.querySelector('img');
const imgInput = document.querySelector('input.img');
const imgButton = document.querySelector('button.img');

const saveFile = async (blob, suggestedName) => {
 
// Feature detection. The API needs to be supported
 
// and the app not run in an iframe.
 
const supportsFileSystemAccess =
   
'showSaveFilePicker' in window &&
   
(() => {
     
try {
       
return window.self === window.top;
     
} catch {
       
return false;
     
}
   
})();
 
// If the File System Access API is supported…
 
if (supportsFileSystemAccess) {
   
try {
     
// Show the file save dialog.
     
const handle = await showSaveFilePicker({
        suggestedName
,
     
});
     
// Write the blob to the file.
     
const writable = await handle.createWritable();
      await writable
.write(blob);
      await writable
.close();
     
return;
   
} catch (err) {
     
// Fail silently if the user has simply canceled the dialog.
     
if (err.name !== 'AbortError') {
        console
.error(err.name, err.message);
       
return;
     
}
   
}
 
}
 
// Fallback if the File System Access API is not supported…
 
// Create the blob URL.
 
const blobURL = URL.createObjectURL(blob);
 
// Create the `` element and append it invisibly.
 
const a = document.createElement('a');
  a
.href = blobURL;
  a
.download = suggestedName;
  a
.style.display = 'none';
  document
.body.append(a);
 
// Click the element.
  a
.click();
 
// Revoke the blob URL and remove the element.
  setTimeout
(() => {
    URL
.revokeObjectURL(blobURL);
    a
.remove();
 
}, 1000);
};

textButton
.addEventListener('click', async () => {
 
const blob = new Blob([textarea.value], { type: 'text/plain' });
  await saveFile
(blob, textInput.value);
});

imgButton
.addEventListener('click', async () => {
 
const blob = await fetch(img.src).then((response) => response.blob());
  await saveFile
(blob, imgInput.value);
});
       

除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。

上次更新時間:2023-10-25 (世界標準時間)。