Jak zapisać plik

Obsługa plików to jedna z najczęstszych czynności w aplikacjach w internecie. Tradycyjnie użytkownicy musieli przesłać plik, wprowadzić w nim pewne zmiany, a następnie pobrać go ponownie, co spowodowało utworzenie kopii w folderze Pobrane pliki. Dzięki interfejsowi File System Access API użytkownicy mogą teraz bezpośrednio otwierać pliki, wprowadzać zmiany i zapisywać zmiany w pierwotnym pliku.

Aby zapisać plik, wywołaj metodę showSaveFilePicker(), która zwraca obietnicę z funkcją FileSystemFileHandle. Możesz przekazać żądaną nazwę pliku do metody jako { suggestedName: 'example.txt' }.

Obsługa przeglądarek

  • 86
  • 86
  • x
  • x

Źródło

Klasyczny sposób

Korzystanie z elementu <a download>

Element <a download> na stronie pozwala użytkownikowi kliknąć go i pobrać plik. Teraz trzeba w niewidoczny sposób wstawić element na stronie za pomocą kodu JavaScript i kliknąć go w sposób zautomatyzowany.

Obsługa przeglądarek

  • 15
  • 13
  • 20
  • 10.1

Źródło

Stopniowe ulepszanie

Poniższa metoda korzysta z interfejsu File System Access API, gdy jest obsługiwany, lub wykorzystuje podejście klasyczne. W obu przypadkach funkcja zapisze plik, ale jeśli obsługuje interfejs File System Access API, wyświetli się okno dialogowe zapisywania pliku, w którym będzie mógł wybrać, gdzie ten plik ma zostać zapisany.

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

Więcej informacji

Prezentacja

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

O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.

Ostatnia aktualizacja: 2023-10-25 UTC.