云游屋
扫描关注云游屋

云游屋

云游屋
PREV
NEXT

javascript下载文件5种方式实例详解

云游屋•2023-11-17•WEB前端• 319
在Web开发中文件下载功能是一个非常常见的功能,这篇文章主要给大家介绍了关于javascript下载文件5种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

整理javascript下载文件五种方式，接收后台返回流下载或直接下载文件。欢迎补充~

业务场景

假设通过后端接口返回的流，需要前端点击【下载到本地】按钮下载文件。

一.window.location.href下载

最简单的方式：url即文件或接口地址，额外参数通过url后问号拼接参数，后端get请求方式接收。

1
2
let url='http://10.0.0.103:6767/file/downloadFile'
window.location.href = url

缺陷：1.直接访问可能会覆盖当前页面地址，影响用户体验。

2.图片、pdf 等url资源会表现为预览而非下载。

二.window.open()下载

用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。url为后端提供的文件下载路径

1
2
let url='http://10.0.0.103:6767/file/downloadFile'
window.open(url);

缺陷：这个方法只能将指定路径的资源加载到浏览器里面，如果文件不能被浏览器浏览，那就会被浏览器下载到本地。反之，如果下载一个txt文本，用该方法会直接预览txt文件。

三.iframe 下载

和创建动态a标签的逻辑大同小异。

1
2
3
4
5
6
7
8
9
10
11
12
<el-button size="mini" @click="handleExport(item)">导出</el-button>
function handleExport(item) {
        try {
      let url='http://10.0.0.103:6767/file/downloadFile';
            let elementIftrame = document.createElement("iframe");
            elementIF.src = url;
            elementIF.style.display = "none";
            document.body.appendChild(elementIftrame);
        }catch(error) {
            console.log(error);
        }
    }

四.【动态a标签】结合【axios方法】的方式下载

-axios请求将后端给的文件流下载下来
-若该接口有登录校验，将下载的文件流转换成blob数据，反之不需要这一步
-通过window.URL.createObjectURL(blob)将blob转化成url
-通过动态生成a标签，模拟点击下载事件
-完成下载动作

1.若/getZipInfo接口没有登录校验，就不用下载文件流转成blob数据。

1
2
3
4
5
6
7
8
9
10
let curHost=window.location.host
let fileName=`module_20230920.zip`
let url=`${curHost}/service/getZipInfo?fileName=${fileName}`
// 创建下载按钮a标签进行自动点击下载，下载完后移除按钮a标签
let downloadDom=document.createElement('a')
downloadDom.href=url
// downloadDom.download=fileName //--不是必须 若需要【前端重命名文件夹】的话这句代码就需要
document.body.appendChild(downloadDom)
downloadDom.click()
document.body.removeChild(downloadDom)

2.若/getZipInfo接口有登录校验，就需要把下载文件流转成blob数据再下载，res为文件流

1
2
3
4
5
6
7
8
9
10
11
let fileName=`module_20230920.zip`
let blob=new Blob([res],{type:'application/octet-stream'})
let href=window.URL.createObjectURL(blob)
// 创建下载按钮a标签进行自动点击下载，下载完后移除按钮a标签
let downloadDom=document.createElement('a')
downloadDom.href=href
downloadDom.download=fileName //--不是必须 若需要【前端重命名文件夹】的话这句代码就需要
document.body.appendChild(downloadDom)
downloadDom.click()
document.body.removeChild(downloadDom)
window.URL.revokeObjectURL(href)

五.form表单的形式下载【比较少用到，借鉴别人的方法】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function handleExport() {
        let url='http://10.0.0.103:6767/file/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();
    }

注意： 若下载的文件包解压时需要密码的话，前后端生成的文件名必须一致才能解压，否则无法会导致解压失败。

总结

到此这篇关于javascript下载文件5种方式的文章就介绍到这了！


发表评论