前端使用Fetch调用后端Restful接口实现下载

最新推荐文章于 2024-09-09 09:57:35 发布

放荡不羁笑点高

最新推荐文章于 2024-09-09 09:57:35 发布

阅读量648

点赞数

分类专栏：个人记录文章标签：前端 restful javascript

本文链接：https://blog.csdn.net/qq_16240313/article/details/127041784

版权

个人记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要记录有两种方式；一种是dataURL的方式，一种是Blob方式；听说dataURL文件大小有限制，但我目前在chrome上用245M的zip文件也没问题；Blob是一种更加被广泛支持的特性，基本没什么限制;
1. dataUrl的方式

function xiazai() {
            fetch('/application/xiazai', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                credentials: "same-origin"
            }).then((resp) => {
                resp.json().then((bodyData)=>{
                    //encodeURIComponent解决中文乱码
                    let uri = 'data:application/zip;base64,' +     encodeURIComponent(bodyData.data);
                    //通过创建a标签实现
                    var link = document.createElement("a");
                    link.href = uri;
                    //对下载的文件命名
                    link.download =  "json数据表.zip";
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                });
            }, (err) => {
                console.log(err);
            })
        }

2. Blob的方式

function blobFile() {
            fetch('/application/xiazai', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                credentials: "same-origin"
            }).then((resp) => {
                resp.json().then((bodyData) => {
                    getFile(bodyData.data, "我的xiao狗.zip");

                });
            }, (err) => {
                console.log(err);
            })

        }


        function getFile(base64, fileName) {
            var bytes=window.atob(base64),
            n = bytes.length,
            u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bytes.charCodeAt(n);
            }
            let blob = null;
            if (!window.Blob)
                alert("当前浏览器不支持该Blob,请升级浏览器或使用Chrome浏览器")
            else
                blob = new Blob([u8arr]);

            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(url.src, url.name);
            } else {
                var link = document.createElement("a");
                link.setAttribute("href", window.URL.createObjectURL(blob));
                link.setAttribute("download", fileName);
                document.body.appendChild(link);
                link.click();
                link.remove();
            }
        }