javascript下载文件几种方式，接收后台返回流下载或直接下载文件

目录

1 javascript下载文件7中方式

1.1 window.location.href下载

1.2 window.location下载

1.3 iframe下载

1.4 form表单的形式下载

1.5 a标签的方式下载

1.6 ajax方式后台返回文件流下载

1.7 axios方法后台返回流方式下载

 2.完整源码

1.1 window.location.href下载

function btn1() {debugger;window.location.href = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";}

1.2 window.location下载

function btn2() {debugger;window.location='http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile';}

1.3 iframe下载

function btn3() {try {var elementIF = document.createElement("iframe");elementIF.src = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";elementIF.style.display = "none";document.body.appendChild(elementIF);}catch(error) {console.log(error);}}

1.4 form表单的形式下载

function btn4() {const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";var form = $("
");form.attr("style", "display:none");form.attr("target", "_self");form.attr("method", "get");form.attr("action", url);$("body").append(form);// 提交form.submit();}

1.5 a标签的方式下载

function btn5() {const fileName = "Benjamin_Download_Test_File.pdf";const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";var a = document.createElement("a");a.download = fileName;a.href = url;// 修复firefox中无法触发click$("body").append(a)a.click();$(a).remove();}

1.6 ajax方式后台返回文件流下载

function btn6() {debugger;const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";$.ajax({url: url,type: 'get',data: {},contentType: 'application/json;charset=utf-8',// 指定服务器返回的类型,因为我们要返回文件流,所以类型为二进制数据dataType: 'binary',// 原生XMLHttpRequest 的属性,设置响应类型为blob,接收文件流xhrFields: {responseType: 'blob'},success: function(result, status, xhr) {const fileName = "Benjamin_Download_Test_File_20221225.pdf";// 可通过XMLHttpRequest对象,获取响应头                console.log(xhr);// 浏览器兼容 参数Blob类型                const downloadURL = (window.URL || window.webkitURL).createObjectURL(result);// 创建a标签var a = document.createElement('a');// 下载后文件的名字a.download = fileName;a.href = downloadURL;document.body.appendChild(a);a.click();setTimeout(function () {                    // 移除内存中的临时文件路径和为下载而创建的a标签                    URL.revokeObjectURL(downloadURL);                    a.remove();                }, 10000);},error: function (xhr, textStatus, errorMessage) {                // 从响应头中获取异常信息,如果包含中文的话会乱码因此 后台URLEncoder.encode() + 前台decodeURIComponent() 防止乱码                const errorInfo = decodeURIComponent(xhr.getResponseHeader("errorInfo"));                // 对错误信息进行打印                console.log(errorInfo);            }});}

1.7 axios方法后台返回流方式下载

function btn7() {debugger;const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";const fileName = "Benjamin_Download_Test_File_20221225.pdf";this.axios.get(url, {responseType: 'blob'}).then(response => {// 创建a标签let a = document.createElement("a");a.download = fileName;// 创建二进制对象const blob = new Blob([response.data]);const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);a.href = downloadURL;// 模拟点击a.click();//释放资源并删除创建的a标签            URL.revokeObjectURL(downloadURL);// a.hrefdocument.body.removeChild(a);}).catch(error => { console.log(error);});}

下载按钮： 

 都可以成功下载：

后台简单源码：

@RestController@RequestMapping("/flower/beetl")@CrossOriginpublic class BeetlController {    @GetMapping(value = "/downloadFile")    public void downloadFile(HttpServletResponse httpServletResponse) {        File file = new File("C:\\Users\\admin\\Desktop\\download\\Benjamin_Download_Test_File.pdf");        InputStream is = null;        OutputStream os = null;        try {            is = new FileInputStream(file);            os = httpServletResponse.getOutputStream();            httpServletResponse.setContentType("application/octet-stream");            httpServletResponse.setHeader("Content-Disposition", "attachment;fileName=Benjamin_Download_Test_File.pdf");            int len = 0;            byte[] bytes = new byte[1024];            while ((len = is.read(bytes)) != -1) {                os.write(bytes, 0, bytes.length);                os.flush();            }        } catch (FileNotFoundException e) {            e.printStackTrace();        } catch (IOException e) {            e.printStackTrace();        } finally {            try {                is.close();            } catch (IOException e) {                e.printStackTrace();            }            try {                os.close();            } catch (IOException e) {                e.printStackTrace();            }        }    }}

 html页面源码：

        
window.location.href下载
 
window.location下载
 
iframe下载
 
form表单的形式下载
 
a标签的方式下载
 
ajax方式后台返回文件流下载
 
axios方法后台返回流方式下载
 
    

来源地址：https://blog.csdn.net/m0_48983233/article/details/128438212