zoukankan      html  css  js  c++  java
  • 文件流下载

     后台接口传过来的文件流。

    1.直接打开这个接口拼参数,局限:get请求,无法携带token

     2.通过请求接口,用blob和URL.createObjectURL(blob)来下载文件

    踩到的一个坑:使用ajax请求下来的文件,文件一般都会无法打开或者乱码

    原因:因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。

    文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序。

    解决:使用xhr去请求接口

    具体代码如下:

    var xhr = new XMLHttpRequest();
        xhr.open("GET", `/api/total/exportExcel?month=${$(this).data("month")}&factory=${$(this).data("factory")}`, true);
        var name = $(this).data("factory") + getDays($(this).data("month"));
        xhr.setRequestHeader("token", window.localStorage.getItem("token"));
        xhr.responseType = "blob";
        xhr.onload = function(oEvent) {
                var content = xhr.response;
                var fileName = `${name}.xlsx`; // 保存的文件名
                var elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                var blob = new Blob([content]);
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                document.body.removeChild(elink);
        };
        xhr.send();

    即可

    补充:post的话

    var xhr = new XMLHttpRequest();
        xhr.open("POST", "接口地址", true);
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.setRequestHeader("token", window.localStorage.getItem("orderToken"));
        xhr.responseType = "blob";
        xhr.onload = function(oEvent) {
            var content = xhr.response;
                    var fileName = `${name}.xlsx`; // 保存的文件名
                    var elink = document.createElement('a');
                    elink.download = fileName;
                    elink.style.display = 'none';
                    var blob = new Blob([content]);
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    document.body.removeChild(elink);
        };
        xhr.send("参数");

    下载成blob类型的文件,可以通过类型判断

     判断是json还是其他类型的

    要还原json的数据:

     用new FileReader()

  • 相关阅读:
    django 静态文件模版上传下载配置
    drf ModelViewSet之匹配路由参数
    Django drf序列化外键关联表ID以为字段
    Django 自关联递归序列化模块 django-rest-frame-recursive模块
    Python利用Psycopg2模块将Excel表格数据导入Postgressql
    PyTorch中view的用法
    P1113 杂务 【拓扑排序】
    P3916 图的遍历 【反向建图+DFS】
    P2814 家谱【map型的并查集】
    P1102 A-B 数对【map】
  • 原文地址:https://www.cnblogs.com/ssszjh/p/13155818.html
Copyright © 2011-2022 走看看