前端实现文件下载功能

拼搏现实的明天。 2023-10-11 14:58 21阅读 0赞

`在很多后台管理系统里可能会有导出表格，下载表格，下载压缩包等这样的需求。下面说几种简单的下载的方法：`

`1.最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本地下载）：`

```<a href=``"/user/test/xxxx.xls"` `download=``"文件名.xls"``>点击下载</a>`

```但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;`

`如果再vue项目中需要下载文件需要放在public文件夹下 需要下载的路径是相对于index.html文件路径 否则会提示下载文件未找到`

`2.window.open()方法，后端提供下载接口：`

`html：`

`<button type=``"button"` `id=``"btn1"``>window.open()方法下载</button>`

`js：`

`（最简单：window.location.href=``"xxxxx后端给的下载地址"``）`

`var` `$eleBtn1 = $(``"#btn1"``);`

`//已知一个下载文件的后端接口：`

`https:``//codeload.github.com/douban/douban-client/legacy.zip/master`

`//方法一：window.open()`

`$eleBtn1.click(``function``(){`

```var` `url =``"https://codeload.github.com/douban/douban-client/legacy.zip/master"``;`

```window.open(url);`

`});`

`3.通过form表单提交的方式：`

`html：`

`<button type=``"button"` `id=``"btn2"``>form方法下载</button>`

`js：`

`var` `$eleBtn2 = $(``"#btn2"``);`

`//已知一个下载文件的后端接口：`

`https:``//codeload.github.com/douban/douban-client/legacy.zip/master`

`$eleBtn2.click(``function``(){`

```var` `$eleForm = $(``"<form method='get'></form>"``);`

```$eleForm.attr(``"action"``,``"https://codeload.github.com/douban/douban-client/legacy.zip/master"``);`

```$(document.body).append($eleForm);`

```//提交表单，实现下载`

```$eleForm.submit();`

`});`

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实现下载(ppt word excel)功能

代码： let blob = new Blob(\[this.form.marketingUrl\], \{ //this.form.marketingUrl 后端返回的存

青旅半醒/ 2024年04月01日 16:11/ 0 赞/ 96 阅读

相关前端实现文件下载功能

`在很多后台管理系统里可能会有导出表格，下载表格，下载压缩包等这样的需求。下面说几种简单的下载的方法：` `1.最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本

拼搏现实的明天。/ 2023年10月11日 14:58/ 0 赞/ 22 阅读

相关请求返回文件流格式，实现下载文件功能，前端代码

let _this = this var xhr = new XMLHttpRequest(); let link = proc

小灰灰/ 2023年02月27日 05:29/ 0 赞/ 28 阅读

相关前端下载excel文件等，项目纯前端实现文件下载

最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本地下载）： <a href="/user/test/xxxx.xls" download="文件名.xl

淡淡的烟草味﹌/ 2022年12月29日 02:28/ 0 赞/ 336 阅读

相关 javascript 实现文件下载功能

通过javascript 实现文件下载功能，本代码可判断下载的方式，是另存为还是下载文件，另存为是把网页保存到本地了。JS实现文件下载：在页面上添加以下代码： <

客官°小女子只卖身不卖艺/ 2022年07月26日 06:25/ 0 赞/ 250 阅读

相关 SpringMVC实现文件下载功能（文件导出功能）

1.页面代码 <a class="layui-btn" href="${pageContext.request.contextPath}/bAndWListManag

梦里梦外;/ 2022年05月09日 03:48/ 0 赞/ 347 阅读

相关 ajax 实现文件下载功能

ajax一般是用来请求服务端的数据，下载文件需要先从服务器获取文件请求路径，然后使用form表单提交的方法来实现文件的下载。先引入jquery文件，jquery的免费cdn

素颜马尾好姑娘i/ 2022年02月28日 13:48/ 0 赞/ 1221 阅读

相关 django 实现文件下载功能

第一种方法第一种方法，直接把链接地址指向要下载的静态文件，在页面中点击该链接，可以直接打开该文件，在链接上点击右键，选择“另存为”可以保存该文件到本地硬盘。但是我成功

今天药忘吃喽~/ 2022年02月20日 00:09/ 0 赞/ 625 阅读

相关 django 实现文件下载功能

[django 实现文件下载功能][django] 一、概述在实际的项目中很多时候需要用到下载功能，如导excel、pdf或者文件下载，当然你可以使用web服务自

Love The Way You Lie/ 2022年02月02日 08:41/ 0 赞/ 376 阅读

相关 java实现文件下载功能

第一种方法： public HttpServletResponse download(String path, HttpServletResponse respons

淩亂°似流年/ 2021年06月22日 15:37/ 0 赞/ 617 阅读