后端接口获取到csv格式内容并导出，拒绝乱码

做好一个小前端2025-10-15 19:17

后端接口获取到csv格式内容并导出，拒绝乱码

忽然有一天，用了好久的代码说是导出乱码了，好吧，改一改

javascript 复制代码

exportCsv(csvStr) {
    try {
        // 1. 处理CSV字符串（解决中文乱码：添加UTF-8 BOM头）
        const bom = '\ufeff' // UTF-8 BOM头，确保Excel打开时中文不乱码
        const csvContent = bom + csvStr

        // 2. 创建Blob对象（指定MIME类型为text/csv，编码UTF-8）
        const blob = new Blob([csvContent], {
            type: 'text/csv;charset=utf-8;'
        })

        // 3. 创建临时下载链接
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a') // 隐藏的<a>标签
        a.href = url
        a.download = '观看记录.csv' // 设置下载文件名（支持中文，浏览器会自动编码）

        // 4. 模拟点击下载（解决部分浏览器不触发点击的问题）
        document.body.appendChild(a)
        a.click() // 触发下载

        // 5. 清理资源（避免内存泄漏）
        setTimeout(() => {
            document.body.removeChild(a) // 移除临时标签
            URL.revokeObjectURL(url) // 释放Blob URL
        }, 100)

    } catch (error) {
        this.$message.error('导出失败，请重试！')
    }
}