Como salvar um arquivo

Lidar com arquivos é uma das operações mais comuns para apps na Web. Tradicionalmente, os usuários precisavam fazer upload de um arquivo, fazer algumas alterações e, em seguida, fazer o download novamente, o que resultava em uma cópia na pasta "Downloads". Com a API File System Access, os usuários agora podem abrir arquivos diretamente, fazer modificações e salvar as alterações no arquivo original.

Como usar o método showSaveFilePicker() da API File System Access

Para salvar um arquivo, chame showSaveFilePicker(), que retorna uma promessa com FileSystemFileHandle. É possível transmitir o nome do arquivo desejado para o método como { suggestedName: 'example.txt' }.

Compatibilidade com navegadores

  • 86
  • 86
  • x
  • x

Origem

A forma clássica

Como usar o elemento <a download>

O elemento <a download> em uma página permite que o usuário clique no elemento e faça o download de um arquivo. Agora, o truque consiste em inserir o elemento de forma invisível em uma página com JavaScript e clicar nele de maneira programática.

Compatibilidade com navegadores

  • 15
  • 13
  • 20
  • 10.1

Origem

Aprimoramento progressivo

O método abaixo usa a API File System Access quando há suporte e, em outros casos, retoma a abordagem clássica. Em ambos os casos, a função salva o arquivo, mas, quando há suporte para a API File System Access, o usuário vê uma caixa de diálogo onde ele pode escolher onde salvar o arquivo.

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

Leia mais

Demonstração

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

Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.

Última atualização 2023-10-25 UTC.