Como baixar um arquivo usando javascript/jQuery?

JavaScript ou jQuery podem ser facilmente usados ​​para causar download de um arquivo ao pressionar um botão ou pressionar um Link de tag. Para fazer isso, basta usar o “localização.href ” propriedade do "janela" objeto e defina -o igual ao caminho do arquivo no servidor, que será baixado na máquina do cliente. Para entender melhor isso, siga os exemplos dados abaixo.

Exemplo 1: Usando JS de baunilha e tag

Para este exemplo, a parte do script seria escrita em JavaScript normal, e uma pressão de botão faria com que a máquina do cliente baixasse o arquivo pretendido.

Etapa 1: Configure o documento HTML

Comece criando um novo documento HTML chamado "Home" e adicione as seguintes linhas dentro do documento HTML:

Clique no botão abaixo para baixar o arquivo!

⇬ Fazer download do arquivo

Adicionando as linhas acima dentro do A tag do elemento HTML resultaria no seguinte resultado dentro do navegador:

A partir das linhas que foram adicionadas ao documento HTML, pode -se perceber facilmente que o “OnClick” A propriedade do botão foi definida para a função "⇬ Fazer download do arquivo()". Vamos criar essa função na próxima etapa

Passo 2: Javascript Part

Dentro do tag de script ou no arquivo JavaScript vinculado, adicione as seguintes linhas de código para adicionar a funcionalidade ao botão:

Aqui, a janela.localização.A propriedade Href foi definida para o caminho do arquivo que deve ser baixado pela máquina do cliente. Como apenas o nome do arquivo foi usado como caminho para o arquivo, isso significa que o arquivo é colocado dentro da mesma pasta que o documento HTML:

De qualquer forma, isso faria com que o navegador baixasse o arquivo.

etapa 3: Teste

No final, acenda o documento HTML e clique no botão e observe que o navegador começará a baixar instantaneamente o arquivo como:

Como fica claro no GIF acima de que toda a página da web está funcionando perfeitamente como pretendido.

Exemplo 2: Usando jQuery e marcação

Para este exemplo, a parte do script seria escrita em jQuery e um Link de tag faria com que o navegador inicie o download do arquivo pretendido.

Passo 1: Configure o documento HTML

Assim como o primeiro exemplo, crie um novo documento HTML chamado "Home" e adicione as seguintes linhas dentro do documento HTML:

Clique no botão abaixo para baixar o arquivo!

Clique aqui!

Agora, neste exemplo, um Tag com o ID "Download" está sendo usado em vez de um botão. A execução deste documento HTML produzirá os seguintes resultados na página da web:

Em seguida, é adicionar algum jQuery para baixar o arquivo toda vez que o link é clicado.

Etapa 2: código jQuery

Na tag de script ou no arquivo de script, adicione as seguintes linhas:

$ (documento).pronto (function ()
$ ("#download").Clique (função (e)
e.prevenvDefault ();
janela.localização.href = "demonstração.docx ";
);
);

Nas linhas acima:

• Uma função está sendo chamada quando o documento está totalmente pronto
• Dentro dessa função, uma verificação constante foi aplicada no elemento com o id "download" qual é realmente o marcação e o cheque é de um evento de "clique"
• Depois disso, basta acessar o local.atributo href para o caminho do arquivo.

Etapa 3: Teste

Ligue o documento HTML e clique no link e observe a resposta do resultado como esta:

O link clicable está fazendo com que a máquina do cliente baixe o arquivo pretendido usando o jQuery

Embrulhar

Para usar JavaScript ou JQuery para fazer com que a máquina do cliente baixe um arquivo específico, basta acessar o atributo href da propriedade de localização do objeto da janela e defini -lo igual ao caminho completo do arquivo no servidor. Ao usar dessa maneira, é fácil criar um botão que fará com que o arquivo seja baixado. E também, um link clicável para fazer com que o arquivo faça o download. De qualquer forma, o procedimento foi explicado minuciosamente nos exemplos acima.