前端文件下载

朱雀 2022-10-31 00:52 196阅读 0赞

先记录

function getFile(url, params) { 
        axios({ 
            method: 'get',
            url: suffix + url + '?' + QueryString.encode(params),
            responseType: 'arraybuffer',
            withCredentials: true,
        }).then(function (response) { 
            let name = _fileNameInContentDisposition(response);
            // console.log("返回结果", response, response.headers['content-type'], name);
            let blob = new Blob([response.data], { 
                type: response.headers['content-type']
            });
            let objectUrl = URL.createObjectURL(blob);
            _saveFile(objectUrl, name);
            window.URL.revokeObjectURL(blob);
        });
    
    }
    
    function _saveFile(objectUrl, name) { 
        let a = document.createElement('a');
        a.href = objectUrl
        a.download = name // 文件名 ，
        a.dispatchEvent(new MouseEvent('click', { 
            bubbles: true,
            cancelable: true,
            view: window
        }))
    }
    
    
    
    function _fileNameInContentDisposition(res) { 
        let des = res.headers['content-disposition'];
        let last = des.lastIndexOf("filename=");
        let fileName = des.slice(last).replace("filename=", "");
        // console.log("获取到文件名", fileName);
        return fileName;
    }

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关前端下载文件的方式

需求：页面上有一个下载按钮，点击后实行文件下载功能。方式一：使用window.open() 方式二：使用form表单下载方式三：使用a标签，H5中有download属

悠悠/ 2023年10月09日 12:42/ 0 赞/ 75 阅读

相关 web前端JavaScript文件下载代码

web前端JavaScript 文件下载代码 //web前端JavaScript 文件下载代码 const downloadTxtFile = () => {

水深无声/ 2023年09月23日 19:52/ 0 赞/ 144 阅读

相关前端---文件上传 & 文件下载

文件上传(通过FormData对象实现) function uploadFile () { const formData = new FormDat

比眉伴天荒/ 2023年01月21日 09:24/ 0 赞/ 29 阅读

相关前端下载服务器文件

前端直接下载服务器文件函数 / 使用的插件 axios / downloadFile(src,name){ axios(

短命女/ 2023年01月16日 02:50/ 0 赞/ 144 阅读

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

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

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

相关前端下载文件(blob流文件下载及修改下载文件名称)

项目中经常遇到文件下载需求，有时候后台返回的是一个blob流文件（就是看起来像是乱码的数据），这时就需要前端对文件进行处理，或展示，或下载。故这里简单实现一下blob流文件下载

一时失言乱红尘/ 2022年12月27日 14:03/ 0 赞/ 344 阅读

相关前端文件下载

先记录 function getFile(url, params) { axios({ method: 'get',

朱雀/ 2022年10月31日 00:52/ 0 赞/ 197 阅读

相关前端下载二进制文件乱码

一：二进制文件转化 downllodFile(fileObj) { downFiles(fileObj.id).then(data=

- 日理万妓/ 2022年10月27日 13:47/ 0 赞/ 28 阅读

相关前端文件下载

function download(url, filename) { return fetch(url).then(res => res.blob()

水深无声/ 2021年09月01日 01:38/ 0 赞/ 447 阅读