vue项目中文件下载踩坑之路
2019-05-29 17:40
190 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41950018/article/details/90675063
最近工作中用到了文件的下载功能,文件的下载不能简单用ajax请求,文件下载还会涉及到http跨域问题,于是搜集了各种方法,一步步踩坑,终于有点眉目了。
方法一:a标签下载
利用a标签的href属性,但是遇到的问题是,我这边拿到的url是跨域的,在给文件设置名称的时候,a标签的download属性无效。找了很多资料也没能解决,想哭。
代码如下:
[code] if (!url) { return } let link = document.createElement('a') link.setAttribute('download', this.cOrderNo + '.zip') link.style.display = 'none' link.href = url document.body.appendChild(link) link.click()
方法二:form进行文件下载
这里是灵活用到了form的action,method,将请求嵌入到form的属性中,可以利用form中的input框进行传参,如果遇到accessToken的问题,可以在form的header中设置
代码如下:
[code]let accessToken = getToken() let form = document.createElement('form') let headerParam = {} headerParam.Authorization = accessToken form.setAttribute('header', headerParam) form.setAttribute('style', 'display:none') form.setAttribute('method', 'get') let inputFileId = document.createElement('input') inputFileId.setAttribute('type', 'hidden') inputFileId.setAttribute('name', 'fileIds') inputFileId.setAttribute('value', params.fileIds) form.append(inputFileId) let inputFileName = document.createElement('input') inputFileName.setAttribute('type', 'hidden') inputFileName.setAttribute('name', 'packageName') inputFileName.setAttribute('value', params.packageName) form.append(inputFileName) form.setAttribute('action', '/ares/material/download') form.setAttribute('target', '') document.body.appendChild(form) form.submit()
三、插件downloadjs
这个插件还是好用的,但是好像有跨域的问题不能解决,如果下载的链接不跨域的话,可以使用没问题,而且这个的使用方式比较简单,npm安装就可以。
相关文章推荐
- VUE + axios上传下载文件踩坑之路
- vue+blob,文件流转word文档并实现下载功能,解决vue中document.createElement is not a function
- vue中实现文件的上传读取及下载
- IntentService+retrofit2.0下载文件、更新APP(项目一部分demo)
- 项目中使用高速缓冲流实现文件下载功能
- vue-cli的webpack模板项目配置文件分析
- libcurl进行文件下载类项目开发
- 用vue手脚架生成的项目直接修改时.vue文件后,保存编译就报一大堆的错,解决方法
- vue完成项目后,如何打包成静态文件
- 项目开发技巧(四):使用JspSmartupload实现文件上传下载(一):JspSmart之upload组件源码及使用
- vuejs项目运行的探索之路
- Vue-cli搭建完项目,各文件解释
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
- android开发步步为营之67:使用android开源项目android-async-http异步下载文件
- vue项目中使用pdf.js预览pdf文件
- web项目文件的下载
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- Vue项目碰到"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件"报错
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
- 关于vue项目中全局引入一个 .scss文件的问题解决