笔记-js异步下载文件

WelliJhon 发布于2019-08-23 18:27 / 1079人阅读

摘要：类型处理正常下载时直接返回响应数据请求出错时，接口返回的内容是，于是将中的内容取出中的内容页面自动开始下载也可以让后端设置文件名，通过返回参考博客

之前因为懒，异步请求的下载都是直接写在a标签里，请求权限让后端做特殊处理判断，就像这样

点击下载

现在觉得这样处理不太好，一个是后端权限要做多带带判断，另一个是如果调用接口报错就没办法处理了，研究之后修改了一下，项目用了axios这个lib，所以是针对axios的request和response做了修改，不过对于原生写法和其他库，原理是一样的

1.将请求的responseType设置为blob

function exportData(p) {
    return axios({
        url: "/data/export",
        method: "get",
        params: p,
        responseType: "blob"
    });
}

2.对response进行处理

因为项目里用了response拦截器来处理响应，所以我在拦截器里做了处理，也可以多带带处理。

axios.interceptors.response.use(
    response=> {
        // ...
        // Blob类型处理
        let checkType = response.config.responseType;
        if(checkType === "blob" && res.type === "application/octet-stream") { // 正常下载时直接返回响应数据
            return response.data
        } else if(checkType === "blob" && res.type === "application/json") { // 请求出错时，接口返回的内容是json，于是将blob中的内容取出
            let reader = new FileReader();
            reader.onload = function(event){
                let content = reader.result; // blob中的内容
                Message({
                    message: JSON.parse(content).desc,
                    type: "error",
                    duration: 5 * 1000
                })
            };
            reader.readAsText(response.data);
            return Promise.reject("error")
        }
        
        // ...
    },
    error => {
        // ...
    }
)

3.html页面自动开始下载

exportData(para).then(res => {
    let content = res;
    let aTag = document.createElement("a");
    let blob = new Blob([content]);
    aTag.download = "Datas.xlsx"; // 也可以让后端设置文件名，通过headers返回
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}).finally(() => {

})

参考博客：https://www.cnblogs.com/coder...

GPU云服务器云服务器 js异步文件异步加载js文件 js读语音文件下载 js下载服务器文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105257.html

日常笔记

摘要：零延迟零延迟并不是意味着回调函数立刻执行。异步编程的中方法包括回调函数事件监听采用事件驱动模式。执行完成后，立即触发事件，从而开始执行。所谓对象，就是代表了未来某个将要发生的事件通常是一个异步操作。 JavaScript单线程与浏览器多线程 Javascript是单线程的：因为JS运行在浏览器中，是单线程的，每个window一个JS线程。作为浏览器脚本语言，JavaScript的主要...

myshell 2019-08-22 10:38 评论0 收藏0
《javascript高级程序设计》笔记：script元素属性

摘要：高级程序设计摘录可选。表示通过属性指定的代码的字符集。这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为。规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于事件执行。《javascript高级程序设计》摘录： async:可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部...

since1986 2019-08-20 18:34 评论0 收藏0
JavaScript 笔记一 script 标签

摘要：一标签中得属性的使用已经废弃。当浏览器遇到这个字符串是会认为当前的脚本已经执行结束，即使是字符串也需要这样执行，如果这个确实需要被做为字符串处理，那必须进行转义就像这样。二标签应该放到页面最底部吗一定要放在的最底部吗一、script 标签中得属性的使用 1、language 已经废弃。 2、 type 对于普通的的javascript类型的文件不需要添加, 因为不添加默认为text/...

hiYoHoo 2019-08-22 18:43 评论0 收藏0
《高性能JavaScript》（读书笔记）

摘要：加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。异步加载，和，浏览器不会失去响应它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。插件，可以让回调函数在页面结构加载完成后再运行。这次主要是对《高性能JavaScript》一书的读书笔记，记录下自己之前没有注意到或者需要引起重视的地方第一章加载和执行 js代码在执行过程中会阻塞浏览...

moven_j 2019-08-21 17:58 评论0 收藏0
【读书笔记】《高性能JavaScript》

摘要：性能访问字面量和局部变量的速度是最快的，访问数组和对象成员相对较慢变量标识符解析过程搜索执行环境的作用域链，查找同名标识符。建议将全局变量存储到局部变量，加快读写速度。优化建议将常用的跨作用域变量存储到局部变量，然后直接访问局部变量。缺陷这本书是2010年出版的，这本书谈性能是有时效性的，现在马上就2018年了，这几年前端发展的速度是飞快的，书里面还有一些内容考虑IE6、7、8的东...

chengjianhua 2019-08-22 13:51 评论0 收藏0