vue 文件下载-可以拿到完整的路径

可以拿到完整的路径，在浏览器中输入该路径，可直接下载。点击下载按钮，处理下载

HTML

<div
    v-if="submitDialogText === '3'"
     @click="downApp(submitForm.urlId)"
     style="cursor: pointer; color: #1890ff"
>
     {{ submitForm.maintenanceNames }}
</div>

JS

前面都是为了拿到可直接打开的路径downPath，之后的才是下载处理

const downApp = (id) => {
    console.log(id)
    selectFileStatus(id)
}
let relativeIp = ref("")
const getConfigByDictionaryCode = () => {
    post(API.system.getConfigByDictionaryCode, {
            params: {
                dictionaryCode: 'DBANK_URL',
            },
        })
        .then((res) => {
            console.log(res.data, 'IPUIPIP')
            relativeIp = res.data
        })
        .catch((res) => {
            message.error(res);
        });
}
let downPath = ref("")
//获取文件路径
const selectFileStatus = (id) => {
    post(API.uploader.selectFileStatus, {
            params: {
                identifier: id,
            },
        })
        .then((res) => {
            console.log(res.data.relativePath, 'relativePathrelativePathrelativePath')
            let relativePath = res.data.relativePath
            downPath = relativeIp + relativePath
            //此时拿到了完整的路径downPath
            console.log(downPath, 'downPathdownPath')
            //截取最后一位小数点后面的，即拿到文件后缀名suffix 
            let suffix = downPath.match(/\.([^\.]+)$/)[1]
            //三个参数，downPath是完整的路径，relativePath是文件名，suffix是文件后缀
            if (relativePath && relativeIp) {
                download(downPath, relativePath, suffix)
            } else {
                return
            }
        })
        .catch((res) => {
            message.error(res);
        });
}
//处理下载
const download = (url, filename, suffix) => {
    if (!url) {
        return;
    }
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", filename + "." + suffix);
    document.body.appendChild(link);
    link.click();
}
return {
    //文件下载
    downApp,
    downPath,
    relativeIp,
}