1 javascript下载文件7中方式

1.1 window.location.href下载

/***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下载

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

1.3 iframe下载

/****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表单的形式下载

/***form表单的形式下载*/function btn4() {const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";var form = $("<form>");form.attr("style", "display:none");/**target 属性规定一个名称或一个关键词，指示在何处打开 action URL，* 即在何处显示提交表单后接收到的响应。**_blank 在新窗口/选项卡中打开。*_self 在同一框架中打开。（默认）*_parent 在父框架中打开。*_top 在整个窗口中打开。*framename 在指定的 iframe 中打开。*/form.attr("target", "_self");form.attr("method", "get");form.attr("action", url);$("body").append(form);// 提交form.submit();}

1.5 a标签的方式下载

/***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方式后台返回文件流下载

/****ajax方式后台返回文件流下载、*success(data, textStatus, jqXHR)：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。**关键在于dataType和xhrFields的属性指定上,指定对属性才能返回blob文件流，dataType: 'binary',xhrFields: {responseType: 'blob'},*/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方法后台返回流方式下载

/***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);});}

下载按钮：

都可以成功下载：

2.完整源码

后台简单源码：

@RestController
@RequestMapping("/flower/beetl")
@CrossOrigin
public 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页面源码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>7中下载方式</title>
</head><body><div style="margin-left:60px;margin-top:20px"><button id="btn1" onclick="btn1()" style="background-color:red" >window.location.href下载</button><br> <br><button id="btn2" onclick="btn2()" style="background-color:orange">window.location下载</button><br> <br><button id="btn3" onclick="btn3()" style="background-color:yellow">iframe下载</button><br> <br><button id="btn4" onclick="btn4()" style="background-color:green">form表单的形式下载</button><br> <br><button id="btn5" onclick="btn5()" style="background-color:cyan">a标签的方式下载</button><br> <br><button id="btn6" onclick="btn6()" style="background-color:blue">ajax方式后台返回文件流下载</button><br> <br><button id="btn7" onclick="btn7()" style="background-color:purple">axios方法后台返回流方式下载</button><br> <br></div></body>
<!-- <script th:src="@{js/jquery.min.js}"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/***window.location.href下载*/function btn1() {debugger;window.location.href = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";}/***window.location下载*/function btn2() {debugger;window.location='http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile';}/****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);}}/***form表单的形式下载*/function btn4() {const url = "http://127.0.0.1:6767/file/download/service/flower/beetl/downloadFile";var form = $("<form>");form.attr("style", "display:none");/**target 属性规定一个名称或一个关键词，指示在何处打开 action URL，* 即在何处显示提交表单后接收到的响应。**_blank 在新窗口/选项卡中打开。*_self 在同一框架中打开。（默认）*_parent 在父框架中打开。*_top 在整个窗口中打开。*framename 在指定的 iframe 中打开。*/form.attr("target", "_self");form.attr("method", "get");form.attr("action", url);$("body").append(form);// 提交form.submit();}/***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();}/****ajax方式后台返回文件流下载、*success(data, textStatus, jqXHR)：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。**关键在于dataType和xhrFields的属性指定上,指定对属性才能返回blob文件流，dataType: 'binary',xhrFields: {responseType: 'blob'},*/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);}});}/***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);});}</script><style>button{width:200px;height:35px;}</style>

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

Excel导入导出（导出有两种方式：直接返回流、返回下载地址）
注:文章皆为个人纪录,可用性请以最终结果为准,若有错还请大佬们指出,谢谢! 程序入口 package com.jxz.owner.controller.excel;import com.jxz.own ...
JS 下载文件两种方式总结
后端返回Blob对象(文件流),完成导出.下载功能: 1.介绍Blob Blob Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 Reada ...
前端实现HTML转PDF下载的两种方式
方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件.实现步骤如下: 1,下载插 ...
STM32_基础入门_程序下载的两种方式
一.ISP串口下载 1.所涉及工具:MDK+FlyMcu 2.硬件连接 3.连接步骤 1.搜索并选择对应串口 2.选择要下载的hex文件,将"编程前重装文件"打勾 3.勾选&quo ...
JS-01-在HTML中嵌入JavaScript代码的三种方式
JS-01-在HTML中嵌入JavaScript代码的三种方式 1.JavaScript概述 Web的组成有HTML.CSS还有即将要学习的JavaScript(简称JS). CSS和JS主要是服务于 ...
python 打开文件4种方式
python 打开文件4种方式 python 打开文件4种方式 [方式一]使用os.system()函数运行其他程序 [方式二]使用ShellExecute函数运行其他程序(用这种方法解决我的问题) ...
C++包含头文件几种方式
该博文为原创文章,未经博主同意不得转载,如同意转载请注明博文出处本文章博客地址:https://cplusplus.blog.csdn.net/article/details/105042381 包 ...
python-网络图片下载（两种方式）
利用python进行网络图片下载(两种方式) 1:方式一 1:代码 # coding=utf-8 """ @author: jiajiknag 程序功能: 图片批量下载_ ...
linux上删除文件过慢,Linux上删除大量文件几种方式对比
Linux上删除大量文件几种方式对比 linux上删除大量小文件删除测试:删除500000个小文件测试生成文件: $ for i in $(seq 500000);do echo 'text' &g ...

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.完整源码

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

最新文章

热门文章