在写项目的时候,遇到了一个需要把给定的文件放到页面中,然后用户点击下载按钮将这个文件下载下来,我将其存入了云服务之中(这个云服务是不会清空的,内存又不值几个钱),但是当我下载的时候,下载的文件名是存到服务器地址的路径名,出现了这个问题。 然后我用a标签的dowmLoad属性指定文件下载名字,依然没有效果。
从网上一搜,原来是服务器发送的请求头里控制了这个属性,让浏览器觉得自己设置的没有服务器给的靠谱。
方法!!!!
这个时候,我们可以通过Blob对象和URL.createObjectURL()来实现,就是先将他搞过来成为前端的数据,然后前端用这个数据生成一个文件,最后给他赋予我们想给他的名字,就成功的实现了。
const download = () => {
const fileUrl = "https://***************************************/1700023798306.docx";
const fileName = "测试名字.docx";
fetch(fileUrl)
.then(response => response.blob())
.then(blob => {
// 创建一个虚拟的下载链接
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
// 设置下载属性,并指定文件名
link.download = fileName;
// 将链接添加到文档中,并触发点击事件
document.body.appendChild(link);
link.click();
// 移除链接
document.body.removeChild(link);
});
};
划重点
这个方法有点新!!可能旧版本的浏览器兼容性没有那么好。