美文网首页
a标签下载文件

a标签下载文件

作者: 小北呀_ | 来源:发表于2019-10-24 19:57 被阅读0次

有两种方法,1:a标签 。2:iframe。不同的是:a标签只能下载单个文件,iframe可以多文件下载。

前提是接口成功返回的是文件流格式。

1.如果你的接口时get请求并且请求头不需要带任何东西,可以直接 href=''写进去直接下载

            const elink = document.createElement('a');
            elink.style.display = 'none';
            elink.href = 'http://xxxxxxxxx'
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);

2.如果接口时post,或者需要携带请求头,那可以用Blob。目前我的局限性就是写Blob,必须前端把文件名写入。必须要有elink.download = fileName这行代码,不然我的直接在浏览器跳转页面了(这个问题暂时还没有解决)

 axios.get('http://xxxxx')
                .then(res => {
                   // res.data 是接口返回的文件流
                    const blob = new Blob([res.data])
                    const fileName = 'xxx'
                    const elink = document.createElement('a')
                    elink.download = fileName 
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href) // 释放URL 对象
                    document.body.removeChild(elink)
                })

3.iframe 多文件下载,for循环就ok

 const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = value;
            document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求

相关文章

  • a标签下载文件

    有两种方法,1:a标签 。2:iframe。不同的是:a标签只能下载单个文件,iframe可以多文件下载。 前提是...

  • 前端下载文件而不是打开预览(支持 doc / excel / p

    前端根据后台返回的文件地址(非跨域),实现点击下载文件 a 标签下载文件,download属性可以实现对下载文件的...

  • 前端处理文件下载(带请求头)

    文件下载,token校验 文件下载通常使用a标签进行处理,本次介绍的是通过blob来实现流文件下载,原因是后台网关...

  • 点击a标签触发点击事件后下载文件

    a标签 a标签下载文件 点击下载 添加点击事件 点击下载 因为 点击事件先于href执行 当点击事件返回true时...

  • 纯JS实现下载文本文件

    通常我们前端实现下载文件的做法是用一个a标签,href指向所需要下载的文件的地址。这需要用户主动点击a标签才能下载...

  • 前端文件下载方式

    前端对于文件下载这块的一些常用的基本方法。 一 通过a标签来下载文件 在html5中 a 标签多了一个属性...

  • js 下载

    // 单个文件下载 // 组装a标签 let elink = document.createElement...

  • a标签下载文件

    下载就是这么简单

  • Web前端下载图片/文件

    Web前端下载图片/文件 条条道路通罗马,这里只记录a标签下载图片/文件的方法。 文件类型MIME Blob 对象...

  • 前端文件流生成文件

    前端下载文件一般是一个a标签跳转链接到以上传文件服务器的文件,浏览器自动生成下载,或者是点击直接a标签生成文件流直...

网友评论

      本文标题:a标签下载文件

      本文链接:https://www.haomeiwen.com/subject/uegdvctx.html