前端静态地址访问与二进制流访问文件

(1)静态地址访问
静态地址访问也就是相对地址访问,文件上传到资源服务器,后端只保存了文件地址,前端拿到后端返回的文件路径直接下载到本地
实现的方式有以下几种:
window.location.href=url
window.open(url)
创建a标签并指定a.href=url模拟点击进行下载
(2)二进制流访问
文件存在后端资源服务器上(通常是临时根据前端参数动态生成的,用完就删),后端读取文件后向前端返回文件的二进制流。返回的是一个文件流(response-type: application/octet-stream;charset=UTF-8 )
实现的方式:
将文件写入内存,并且创建a元素,a链接href属性指向内存中的文件,download属性指向要下载的文件名,模拟a元素的点击事件进行下载然后移除a元素

let url = this.uploadUrl;
let urlArr = url.split('/');
let fileName = urlArr[urlArr.length - 1];
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);

你可能感兴趣的:(前端静态地址访问与二进制流访问文件)