js获取后端返回文件流下载文件至本地 / 通过访问指定路径直接从服务器下载文件

最新推荐文章于 2024-07-10 17:54:32 发布
最新推荐文章于 2024-07-10 17:54:32 发布
阅读量8.9k 收藏 11
点赞数 1
文章标签： web javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RussW0/article/details/104678051
版权
本文介绍了如何使用JavaScript处理后端返回的文件流进行本地下载，设置responseType为'blob'。同时，讲解了利用a标签直接从服务器或前端项目的public/data（vue-cli3）或static（vue-cli2）目录下载文件的方法，以及如何通过window.location下载服务器上的文件。
摘要由CSDN通过智能技术生成

获取后端返回文件流下载文件至本地

responseType: ‘blob’ 注意设置类型为blob

// responseType: 'blob'注意请求类型为blob
exportCheckBill(obj)
        .then(response => {
   
          // 处理请求返回的文件流
          const content = response;
          const blob = new Blob([content]);
          const fileName = `文件名.xlsx`;
          if ("download"
最低0.47元/天 解锁文章
RussW0
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
使用JS自动从服务器端下载文件到本地
08-14
NULL 博文链接：https://1017401036.iteye.com/blog/2311922
js获取文件流实现下载功能
逍遥大俠
09-30 4616
后台java代码 @RequestMapping(value = "/rest/application/download", method = RequestMethod.POST) @ResponseBody public void download(HttpServletRequest request, HttpServletResponse response) { String fileName = "aaa.docx"; FileInputStream fis = null;
记录：js处理后端返回的文件流
最新发布
cwdWendy的博客
07-10 128
【代码】记录：js处理后端返回的文件流。
前端接受后端返回的二进制文件流生成文件下载到本地
weixin_43890281的博客
03-18 1725
前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery
js将请求返回的数据保存到文件
weixin_46078854的博客
06-27 899
js将请求返回的数据保存到文件
js处理接口返回的文件流
赵又又的博客
08-02 3197
直接看代码吧，图一是封装的调接口的方法，设置了responseType: 'blob'，这个设置很重要，如果没设置的话可能会导致文件下载后无法正常打开。图二exportExcel方法的第一个参数为接口返回的文档流格式的数据，第二个参数是下载的文件的文件名 export function postExportData(params) { // 其中responseType的设置很重要 return get('/orderManagement/exportData', params, { respo
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
当后端服务器处理文件上传并返回流数据时，前端需要能够接收这些流数据并将其转化为可预览或下载的格式，例如PDF。以下是三种在VueCLI3.0项目中实现PDF预览的方法： 1. **使用PDF.js库** PDF.js是Mozilla维护的一...
js获取上传文件的绝对路径实现方法
10-21
在服务器端，当文件成功上传后，可以通过文件上传的接口来处理文件，这时候就完全不需要在客户端获取文件的绝对路径。 最后，需要提醒的是，尽管某些浏览器可以通过修改设置来获取文件的真实路径，但出于安全和隐私...
vue element中axios下载文件（后端Python）
10-17
当需要下载文件时，前端需要发送一个特定的请求到后端，后端处理完毕后，将文件内容通过响应返回给前端，前端再将这些内容转换成文件供用户下载。 #### 使用axios实现文件下载的关键步骤包括： 1. **设置请求的...
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
10-17
接下来，文件下载功能通常涉及服务器返回一个文件流给客户端，客户端接收到这个流之后，需要将文件内容保存到本地。在这个过程中，客户端需要创建一个用于下载的链接，并且触发这个链接的点击事件来下载文件。通常还...
Java多个文件根据URL下载后打包zip导出.zip
04-16
1. **网络请求**：首先，我们需要使用HTTP协议来从指定的URL下载文件。在Java中，我们可以使用`java.net.URL`和`java.net.URLConnection`类来建立与服务器的连接，并通过`java.io.InputStream`读取响应数据。另外，`...
前端-javascript根据url下载文件
lyt的博客
10-22 1654
var url = url.replace(/\\/g, '/'); var fileName = url.substring(url.lastIndexOf("/")+1); var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; // 为了避免大文件影响用户体验，建议加loading xhr.onload = () => { if (xhr.status === 200)
使用js读取后端数据
One_Punch_Devil的博客
03-17 1362
其中htmlStr参数用于存储html语句，语句中的<td>标签内的data值，需要根据个人需求及数据库字段自行修改。overflow:auto，代表滚动条自动显示与隐藏，数据超过设定长度时，就会出现滚动条，否则就会隐藏。3. controller层。4.service层。
【js】js根据url或数据下载文件到本地
mudarn的博客
07-07 3222
以前都是直接用windows.location.href 然后标签添加个download就可以, 后来发现苹果浏览器这样不能下载，反而在浏览器中把文件直接给打开了。 解决方法如下 （1）如果是后台返回了文件的数据，则前台文件中直接引入这个js，然后直接调用下面的方法就可以了。js下载地址点这里，分别是数据，文件名，文件格式，常见文件格式看本文最后 download(data, strFileName, strMimeType); （2）如果是后台只返回了一个url，那么也是先引用刚刚下载..
js如何获取后端数据并显示——重要（下次就不用犯错了）
qqqweiweiqq的博客
02-20 1422
js
文件流--下载文件保存地址获取文件地址
weixin_43032068的博客
05-10 484
/** * @Description 获得pdf路径 * **/ public static String getUrl(String fileUrl){ String fileResult = ""; try { // String fileUrl = "https://img-pre.ivsky.com/img/tupian/pre/202010/25/futou-003.jpg"; .
js 根据文件流判断文件类型
yin_you_yu的博客
06-02 819
【代码】js 根据文件流判断文件类型。
纯js实现前端获取后端文档流并下载到本地
weixin_46226625的博客
05-17 2946
先获取后端返回的文档流，然后创建一个a标签。把文档流转换成链接形式赋值给a并点击，最后移除a标签并释放刚刚创建的URL对象。 const res = await 请求接口(); const a = document.createElement('a'); const blob = new Blob([res]); const href = window.URL.createObjectURL(bolb); a.href = href; a.download = `下载文件名`; documen
原生js实现文件下载
似水流年QC的博客
05-22 4755
文件下载是前端开发常见的开发需求，本文以vue框架为例介绍两种下载方式，一个是网络文件下载，一个是本地文件下载，具体实现如下，如需体验，可点击底部demo链接。
已知本地文件路径向后端直接传输文件
05-24
一般来说，可以通过 HTTP POST 请求将文件传输到后端。在请求中需要指定文件类型和文件内容。具体实现步骤如下： 1. 创建一个表单，添加一个 input 元素用于选择文件，以及一个 submit 按钮用于提交表单。 ```html <form method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">上传文件</button> </form> ``` 2. 当用户点击提交按钮时，浏览器会将表单中的数据封装成一个 HTTP POST 请求，并将请求发送到后端。 3. 后端接收到请求后，从请求体中获取文件内容，并将其保存到指定的本地路径中。 下面是一个使用Node.js实现的文件上传的示例代码： ```javascript const http = require('http'); const formidable = require('formidable'); const fs = require('fs'); http.createServer(function(req, res) { if (req.url == '/upload' && req.method.toLowerCase() == 'post') { // 创建表单解析器 const form = new formidable.IncomingForm(); // 设置上传目录 form.uploadDir = './uploads'; // 解析表单数据 form.parse(req, function(err, fields, files) { // 获取上传的文件 const file = files.file; // 将文件从临时目录移动到上传目录 fs.rename(file.path, form.uploadDir + '/' + file.name, function(err) { if (err) throw err; res.writeHead(200, {'Content-Type': 'text/plain'}); res.write('文件上传成功！'); res.end(); }); }); } else { res.writeHead(200, {'Content-Type': 'text/html'}); res.write('<form method="post" enctype="multipart/form-data">'); res.write('<input type="file" name="file"><br>'); res.write('<button type="submit">上传文件</button>'); res.write('</form>'); res.end(); } }).listen(8080); ``` 这个示例实现了一个简单的 HTTP 服务器，当用户访问根路径时，服务器会返回一个包含文件上传表单的页面。当用户选择文件并点击提交按钮时，浏览器会将文件上传到服务器，并将文件保存到指定的本地路径中。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值