Vue：如何实现日志导出下载功能？

前端白袍2025-12-19 8:10

提示：当前日志导出下载功能，是基于后端接口返回的日志数据url地址进行操作。
提示：当前日志导出下载功能，是基于后端接口返回的日志数据url地址进行操作。
提示：当前日志导出下载功能，是基于后端接口返回的日志数据url地址进行操作。

文章目录

1.后端接口返回数据示例
2.关键代码

1.后端接口返回数据示例

javascript 复制代码

{
       "status": 0,
       "data": {
               "file_url": "http://test//tmp/log.bin"
       }
}

提示：基于类似上述文件地址实现导出下载功能

2.关键代码

html 复制代码

  <button @click="exportLog()">导出</button >

javascript 复制代码

        exportLog(){
            logApi().then((res) => {
                if (res.status == 0) {
                    const now = new Date();
                    const year = now.getFullYear();
                    const month = ('0' + (now.getMonth() + 1)).slice(-2);
                    const day = ('0' + now.getDate()).slice(-2);
                    const hours = ('0' + now.getHours()).slice(-2);
                    const minutes = ('0' + now.getMinutes()).slice(-2);
                    const seconds = ('0' + now.getSeconds()).slice(-2);

                    const formattedTime = year + month + day + hours + minutes + seconds;
                    const link = document.createElement('a');
                    const blob = new Blob([res.data.file_url]);
                    link.style.display = 'none'
                    link.href = URL.createObjectURL(blob)
                    link.setAttribute('download', 'config_'+formattedTime+'.bin')
                    //setAttribute,第二个参数是定义导出文件的名称。
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                }
            });
		},