项目中实现文件下载功能-案例

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目中实现文件下载功能-案例相关的知识,希望对你有一定的参考价值。

// 接口实现
export function exportRockBoltExcel(data)
    return axiosexport(
        url:"/exportRockBoltExcel",
        method:"post",
        data,
        responseType:"blob"
    )


// API接口下载
API.exportRockBoltExcel(params).then((res)=>
    this.exportFile(res,'数据表');
    this.$message.success("ok")
).catch((err)=>
    this.$message.err("err")
)

 文件下载

// 文件下载
exportFile(blobs,name="默认文件名")
    let blob = new File([blobs],type:"application/octet-stream");
    if("download" in document.createElement("a"))
        const downloadElement = document.createElement("a");
        let href = "";
        if(window.URL)
            href = window.URL.createObjectURL(blob);
        else
            href = window.webkitURL.createObjectURL(blob);
        
        downloadElement.href = href;
        downloadElement.download = `$name.xlsx`;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        if(window.URL)
            window.URL.revokeObjectURL(href);
        else
            window.webkitURL.revokeObjectURL(href);
        
        document.body.removeChild(downloadElement);
        URL.revokeObjectURL(href);
    else
        navigator.msSaveBlob(blob,name);
    

以上是关于项目中实现文件下载功能-案例的主要内容,如果未能解决你的问题,请参考以下文章

项目中实现文件下载功能-案例

如何在选择案例语句中实现枚举

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

Vue项目中实现描点跳转scrollIntoView-案例

Vue项目中实现描点跳转scrollIntoView-案例

小案例--面向对象中实现分页