Vue file download - you can get the full path

You can get the complete path, enter the path in the browser, and download it directly. Click the download button to process the download

HTML

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

JS

The former is to get the path downPath that can be opened directly, and the latter is the download processing

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,
}