Resolva o problema de download de arquivos entre domínios no serviço usando o atributo download da tag H5 a

A maneira mais simples:

 <a href='url' download=filename.ext>Baixar arquivo</a>

Se o URL apontar para o mesmo recurso de origem, é normal.

Se o URL apontar para um recurso de terceiros, o download falhará e o comportamento será o mesmo de quando o download não é usado - os arquivos que podem ser abertos pelo navegador serão abertos diretamente pelo navegador e os arquivos que não podem ser aberto será baixado diretamente. Os arquivos abertos pelo navegador podem ser baixados manualmente.

Solução 1: Compacte o arquivo em um arquivo .zip/.rar que não possa ser aberto pelo navegador e faça o download.

Solução 2: Por meio do encaminhamento de back-end, o back-end solicita recursos de terceiros e os retorna ao front-end. O front-end usa ferramentas como o salvador de arquivos para salvar o arquivo.

Se o recurso de terceiros apontado pela URL estiver configurado com CORS, o atributo de download será inválido, mas o arquivo poderá ser obtido e baixado localmente e o nome do arquivo não poderá ser modificado.

 const downloadRes = async (url, name) => { let response = await fetch(url) // Converta o conteúdo em um endereço de blob let blob = await response.blob() // Crie um link oculto para download let objectUrl = window. URL .createObjectURL(blob) let a = document.createElement('a') //Endereço a.href = objectUrl //Modificar nome do arquivo a.download = nome // Acione o clique document.body.appendChild(a) a.click() //Remover setTimeout(() => document.body.removeChild(a), 1000)}

Se quisermos baixar uma imagem, podemos convertê-la para o formato base64 e depois baixá-la.

 ```export const downloadImg = async (url, nome) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); 'Anônimo'; img.onload = function() { canvas.height = img.height; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); deixe a = document.createElement('a'); .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); canvas = null; }, 1000); }; img.src = url;};```

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.