前端自定义下载文件名

毛三仙

于 2024-09-11 14:47:58 发布

阅读量126

点赞数

分类专栏： vue项目中常用操作 JS基础文章标签：前端

本文链接：https://blog.csdn.net/m0_74149462/article/details/142139779

版权

vue项目中常用操作同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

JS基础

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

data数据格式如下

"data": [
        {
            "createBy": "system",
            "createTime": "2024-09-11 14:08:56",
            "updateBy": "",
            "updateTime": null,
            "beginTime": null,
            "endTime": null,
            "askParam": {},
            "formSpan": null,
            "id": 26,
            "sysCode": "system",
            "annexType": "1",
            "annexName": "系统操作手册",
            "iconUrl": "http://192.168.0.254:19000/secure/icon/2024/09/11/word.png",
            "annexUrl": "[{\"address\":\"annex/2024/09/11/ecd2e6b28b0c47468515b10ad2e1d7ff.docx\",\"name\":\"系统操作手册 .docx\",\"suffix\":\".docx\",\"url\":\"http://192.168.0.254:19000/secure/annex/2024/09/11/ecd2e6b28b0c47468515b10ad2e1d7ff.docx\",\"uid\":1726034934797,\"status\":\"success\"}]",
            "remark": "系统操作手册",
            "sysName": "系统"
        }
    ]

<el-button type="text" @click="download(scope.row)">本地下载</el-button>

download(data) {
    const url = JSON.parse(data.annexUrl);
    if (url.length > 0 && url[0].url) {
        this.downFile(url[0].url, data.annexName);
    }
},

    downFile(url, fileName) {
        const x = new XMLHttpRequest();
        x.open("GET", url, true);
        x.responseType = "blob";
        x.onload = function () {
            const url = window.URL.createObjectURL(x.response);
            const a = document.createElement("a");
            a.href = url;
            a.download = fileName;
            a.click();
        };
        x.send();
    },    
        
        
        // 或者 
        downFile1(url, fileName) {
            fetch(url)
                .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.blob();
            })
                .then((blob) => {
                const downloadUrl = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = downloadUrl;
                a.download = fileName;
                a.click();
                a.remove();
                window.URL.revokeObjectURL(downloadUrl);
            })
                .catch((error) => {
                console.error('Download error:', error);
            });
        },