前端自定义下载文件名

发布于:2024-09-18 ⋅ 阅读:(112) ⋅ 点赞:(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);
            });
        },