场景
- 点击下载按钮
- 调接口，获取对应音频文件的下载url地址
- 再将 url 和 文件名拼接，即：
const downLoadUrl = `${url}?filename=${data.title}.mp3&download=true`
- 以上情况在Safari浏览器打开，会出现中文乱码问题
解决
将 url 转 blob，创建 a 标签，0通过 a.download 重写文件名即可
// 拼接url
const url = `${data.downLoadUrl}?filename=${data.title}.mp3&download=true`
// url 转 blob
fetch(url).then((res) => {
return res.blob(); //转 blob对象
}).then(blob => {
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = `${data.title}.mp3`; // 设置下载文件名
document.body.appendChild(a); // 将链接添加到DOM中
a.click(); // 模拟点击下载
a.remove(); // 下载后移除链接元素
window.URL.revokeObjectURL(a.href); // 释放URL对象
})
结果如下：
原因
-
safari浏览器接口异步方式不能通过 window.open 打开，用 a 标签超链接的形式触发下
-
safari浏览器下载文件时，如果存在中文，会出现乱码，原因是每个浏览器对中文字符的处理不同
-
因此将 url 转 blob，然后再通过 a 标签的形式触发下载，这个时候文件的重写文件名，在
跨域情况下也能实现 -
不转blob直接改download可能会在
跨域时失效
