Forçar download com JavaScript

Os scripts de download forçado têm sido uma parte importante da usabilidade da Internet há muito tempo. Posso atestar isso pelo número de vezes que implementei esse recurso no lado do servidor e pela popularidade do meu Postagem PHP Force Downloadaté hoje. Com o mundo da Web tendo se movido muito mais para o lado do cliente, comecei a procurar um método para forçar o download sem a necessidade de um servidor e o encontrei….right no Firefox DevTools Debugger!

O JavaScript

A função para fazer isso é bem pequena e depende do URL.createObjectUrl:

function downloadFile(data, fileName, type="text/plain") {
  // Create an invisible A element
  const a = document.createElement("a");
  a.style.display = "none";
  document.body.appendChild(a);

  // Set the HREF to a Blob representation of the data to be downloaded
  a.href = window.URL.createObjectURL(
    new Blob([data], { type })
  );

  // Use download attribute to set set desired file name
  a.setAttribute("download", fileName);

  // Trigger the download by simulating click
  a.click();

  // Cleanup
  window.URL.revokeObjectURL(a.href);
  document.body.removeChild(a);
}

A função injeta um <a> no corpo, define seu URL para um elemento Blob para o conteúdo de texto do arquivo de destino e clica no elemento para acionar o download. O elemento permanece oculto durante o processo e é removido do DOM imediatamente após o click() chamada. Assim que a função é chamada, o prompt de download do navegador é exibido.

Estou ansioso para aprender mais sobre os dois createObjectURL e Blob; esses dois são a verdadeira magia dessa técnica!

O senhor agradece a Sneha Jain por implementar essa excelente técnica no depurador DevTools do Firefox!