element-ui下载文件功能

点击“下载”按钮下载文件,后端给前端返回的是token和url。

element-ui下载文件功能_第1张图片            

1.创建“下载”按钮,添加触发事件

element-ui下载文件功能_第2张图片

 2.download方法,将后端需要传的参数id,uuid传过去,将后端返回的token和url连接,用浏览器自带window.open打开地址下载。

element-ui下载文件功能_第3张图片

3.调用后台的接口

element-ui下载文件功能_第4张图片

4.最后就可以成功下载文件啦!

**但如果遇到后台返回的这种

element-ui下载文件功能_第5张图片

我们就需要将后台需要的参数传过去,然后调用接口转为UTF-8,使用decodeURI对Content-Disposition属性值进行解码,拿到filename,拿到文件流和文件名后 接收文件流并创建地址objectUrl,接着利用a标签进行下载即可。

element-ui下载文件功能_第6张图片

JS文件(接口)切记要加responseType:"blob"

element-ui下载文件功能_第7张图片

最后也可成功下载文件。

你可能感兴趣的:(vue,html,javascript,elementui)