Com o desenvolvimento da tecnologia front-end, cada vez mais cenários de negócios exigem front-end para lidar com downloads de arquivos. Entre os muitos métodos, o download por meio do atributo download da tag <a>
é um método comum e relativamente simples.
A tag convencional <a>
implementa link jump através de href. Se você deseja apenas baixar o arquivo em vez de pular para visualização, a melhor maneira é adicionar o atributo download
na tag <a>
, e a operação de download pode ser facilmente realizada. .
download
é um novo atributo da tag <a>
em HTML5. Este atributo forçará o acionamento da operação de download, instruindo o navegador a baixar o URL em vez de navegar até ele, e solicitará que o usuário o salve como um arquivo local. por exemplo:
<a href=result.png download>baixar</a>
Se o atributo download
estiver faltando, clicar em download mudará diretamente para a imagem de visualização. Quando download
for adicionado, o download da imagem será acionado.
A compatibilidade atual do atributo download
é mostrada em caniuse:
Pode-se ver que a maioria dos navegadores convencionais suportam basicamente o atributo download
, e o desempenho do IE é tão impressionante como sempre. Atualmente, muitos sistemas Windows ainda usam o IE, o que também é algo que muitas empresas precisam considerar. Esse problema de compatibilidade limita a aplicação mais ampla do download
.
Diante de alguns cenários de negócios de download de conteúdo dinâmico, ou seja, os endereços de recursos como imagens não são fixos (como imagens geradas por algumas ferramentas de desenho online), apenas o uso de HTML não consegue atender às necessidades. Para satisfazer diferentes downloads de URL, um método de acionamento dinâmico de downloads de URL pode ser implementado por meio de JS.
function download(href, filename='') { const a = document.createElement('a') a.download = filename a.href = href document.body.appendChild(a) a.click() a.remove() }
Deve-se observar que appendChild
e remove
executadas no <a>
criado no código são principalmente para compatibilidade com o navegador FireFox. Ao chamar esse método no navegador FireFox, se você não adicionar a tag <a>
criada a. o corpo, clique O link não fará nada e acionará um download, o que não é o caso do Chrome.
O método acima pode realizar o download de recursos da mesma origem. Mas em muitos cenários, os recursos entre domínios também precisam ser processados. Infelizmente, o atributo download
atualmente se aplica apenas a URLs de mesma origem . Ou seja, se o endereço do recurso a ser baixado for entre domínios, o atributo download
será inválido e clicar no link se transformará em uma visualização de navegação.
Teste: Clique para baixar, o resultado é apenas uma prévia e a imagem não pode ser baixada.
Observação: anteriormente, o Chrome 65 suportava o atributo download
para acionar downloads de arquivos entre domínios. Posteriormente, ele seguiu estritamente a política de mesma origem e não pôde mais acionar o download de recursos entre domínios por meio download
. O FireFox não oferece suporte ao atributo download
de recursos entre domínios.
O atributo download
pode não apenas acionar downloads, mas também especificar o nome do arquivo de download:
<a href=test.png download=joker.png>Baixar</a>
Se o sufixo do arquivo baixado for consistente com o arquivo de origem, você poderá definir o nome do arquivo padrão:
<a href=test.png download=joker>Baixar</a>
Certa vez, o autor encontrou um problema. O download do recurso entre domínios foi acionado por meio da tag <a>
. O código era basicamente o mesmo do método de download mencionado acima, exceto que o local onde download
foi definido era um pouco diferente:
a.setAttribute(baixar, verdadeiro)
Como resultado, ocorreu a seguinte situação na versão antiga do navegador Chrome.
O nome do arquivo baixado torna-se true
. Obviamente, o navegador lê o valor do atributo download
como o nome do arquivo.
Após análise, os problemas acima se devem principalmente a:
1. Em primeiro lugar, download
não deve ser definido como true
. O valor do atributo download
é diferente de disabled
. Ele está diretamente relacionado ao nome do arquivo. E para esse método de download responsivo de front-end e back-end, o atributo download
não é necessário.
2. As versões anteriores do Chrome não apenas suportavam o atributo download
de recursos de vários domínios, mas também podiam redefinir os nomes de arquivos de recursos de vários domínios por meio download
, portanto, a situação acima ocorreu.
O cenário de negócios em que o front-end e o back-end cooperam para concluir o download do arquivo é geralmente implementado pelo back-end definindo Content-Disposition
no cabeçalho da resposta.
No cenário HTTP, o primeiro parâmetro de Content-Disposition é inline (o valor padrão, indicando que o corpo da mensagem na resposta será exibido como parte da página ou da página inteira) ou anexo (o que significa que o corpo da mensagem deve ser baixado para o local; a maioria dos navegadores apresentará uma caixa de diálogo salvar como, preenchendo previamente o valor do nome do arquivo com o nome do arquivo baixado).
Se Content-Disposition
estiver definido no cabeçalho de resposta e o front end também adicionar o atributo download
à tag <a>
do link correspondente, as regras de nomenclatura neste momento serão:
Se ao atributo Content-Disposition no cabeçalho HTTP for atribuído um nome de arquivo diferente deste atributo, o atributo do cabeçalho HTTP terá precedência sobre este atributo.
Após testes, descobriu-se que quando Content-Disposition
no cabeçalho HTTP não está vazio:
No navegador Chrome, não importa se o primeiro parâmetro de Content-Disposition
no cabeçalho HTTP está definido como attachment ou inline , download
não pode redefinir o nome do arquivo enquanto o nome do arquivo estiver definido. Pelo contrário, quando o nome do arquivo estiver vazio, o valor do atributo download
será definido como o nome do arquivo. No navegador FireFox, o navegador lerá apenas o valor do nome do arquivo Content-Disposition
. Se o nome do arquivo estiver vazio, o nome do arquivo de origem será usado. Neste momento, download
não pode redefinir o nome do arquivo.
Para resumir: Se as informações Content-Disposition
não estiverem definidas no cabeçalho de resposta (por exemplo, a URL de mesma origem que geralmente localiza diretamente o recurso), o atributo download
poderá redefinir o nome do arquivo. Se o back-end tiver definido o nome do arquivo no campo Content-Disposition
, o valor do nome do arquivo prevalecerá.
O que devo fazer se ainda quiser redefinir o nome do arquivo quando o nome do arquivo tiver sido definido no back-end?
Blob: URL Há também uma introdução ao atributo download
:
Embora o URL HTTP precise estar na mesma origem, você pode usar blob: URL e data: URL para facilitar aos usuários o download de conteúdo gerado usando JavaScript (como fotos criadas usando um aplicativo Web de desenho on-line).
Blob
(Binary Large Object) é um objeto binário grande. Alguns bancos de dados usam Blob para representar o tipo de campo que armazena arquivos binários. A interface File também é baseada em Blob, herdando as funções do Blob e estendendo-a para suportar arquivos no sistema do usuário. Os objetos Blob são criados usando o construtor Blob:
Blob(blobParts[, opções])
var debug = {hello: world};var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
Se precisar baixar alguns arquivos de texto simples ou de string JS, você pode converter as informações de texto em um fluxo binário de blob, gerar um URL de blob e usar o atributo download
para concluir o download.
const downloadText = (texto, nome do arquivo = '') { const a = document.createElement('a') a.download = nome do arquivo const blob = new Blob([texto], {type: 'text/plain'}) // text refere-se ao conteúdo de texto ou string que precisa ser baixado a.href = window.URL.createObjectURL(blob) // Uma string de URL semelhante a blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf será gerada document.body.appendChild(a) a.click() a.remove()}
Qual é a diferença entre este URL Blob e o URL HTTP comum?
Blob URL/Object URL é um pseudoprotocolo que permite que objetos Blob e Arquivo sejam usados como fontes de URL, como imagens e links para download de dados binários.
O navegador cria uma referência especial ao objeto Blob ou Arquivo internamente por meio de URL.createObjectURL()
. A URL do Blob gerada só pode ser usada em uma única instância do navegador e na mesma sessão, e esse objeto URL será usado quando o objeto URL for usado. saídas de página.
Portanto, o URL do Blob não pode apontar para um recurso do servidor e você não pode abri-lo em outras páginas. Ao mesmo tempo, devido às diferenças nos formatos de codificação, os URLs de Blob ocupam menos recursos de espaço e têm melhor desempenho do que os URLs de dados.
Blobs fornecem um recurso muito útil para desenvolvimento web: criação de URLs de blob. Encapsule os dados binários em um objeto Blob e, em seguida, use URL.createObjectURL()
para gerar um URL do Blob. Como o próprio URL do Blob é um URL de mesma origem, você pode usar esse URL com download
para resolver o problema de download e nomeação. recursos entre domínios.
Blob e Fetch podem resolver o problema de nomeação de arquivos e domínios cruzados: use fetch
para obter recursos de domínio cruzado, retorne um objeto blob e gere um URL Blob e use download
da tag <a>
para acionar o download. O código é o seguinte:
função download(href, nome do arquivo = '') { const a = document.createElement('a') a.download = nome do arquivo a.href = href document.body.appendChild(a) a.click() a.remove() }function downloadFile(url, filename='') { fetch(url, { headers: new Headers({ Origin: location.origin, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) download(blobUrl, nome do arquivo) window.URL.revokeObjectURL(blobUrl) })}
Neste ponto, clique em Baixar novamente e as imagens de vários domínios poderão ser baixadas normalmente para a área local.
Deve-se observar que o servidor onde os recursos de domínio cruzado estão localizados precisa ser configurado com informações Access-Control-Allow-Origin
, caso contrário, você receberá um erro de domínio cruzado em maiúsculas. Exemplo de configuração de cabeçalho:
//Permitir que qualquer nome de domínio acesse o cabeçalho('Access-Control-Allow-Origin: *'); //Especifique o nome de domínio para acessar o cabeçalho('Access-Control-Allow-Origin: https://h5.ele.me ');
Ainda existem algumas deficiências neste método, por exemplo, o navegador limitará o tamanho dos dados do Blob a não mais que 500M e também será insuficiente em termos de desempenho.
Resumir Atualmente, existem muitos métodos de download no front-end, e download
é um dos mais simples. No entanto, uma consideração cuidadosa de alguns desses recursos também pode revelar muitas informações úteis. download
está intimamente relacionado aos recursos do navegador. Atualmente, a compatibilidade desse atributo também é um grande problema. No entanto, até mesmo os funcionários da Microsoft imploram aos usuários que não usem mais download
IE. futuro, e as perspectivas de aplicação se tornarão cada vez mais populares.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.