vue版 文件下载
标签的download: 是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存
downloadFile(content, filename) { filename = filename || 'license'; const blob = new Blob([content]); if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10 navigator.msSaveBlob(blob, filename); } else { // 非IE let aTag = document.createElement('a'); aTag.download = filename; aTag.href = URL.createObjectURL(blob); aTag.click(); URL.revokeObjectURL(aTag.href); } }
axios处理:我们发送请求的时候一定要写上responseType,{responseType:
'arraybuffer
'}
否则下载下来的文件打不开
axios.post('/fileSys/download', { fileId: 'xxx' },{
responseType:'arraybuffer'
}).then((res)=>{
downloadFile(res.data.file, res.data.fileName);
}).catch(function (error) { console.log(error) })
文件上传:利用ES6的fromData来实现
function uploadFile (file) { let formdata = new FormData() formdata.append('file', file) formdata.append('submit', false) let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios.post('/sysFile/upload', formdata, config).then(this.sendFileSucc) }
)
/** * @url {String}: 下载请求路径 * @filename {String}: 文件名 **/ function downByUrl(url,filename) { filename = filename || 'omc.lic'; var req = new XMLHttpRequest(); req.open("GET", url, true); //监听进度事件 req.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; console.log(percentComplete); } }, false); req.responseType = "blob"; req.onreadystatechange = function () { if (req.readyState === 4 && req.status === 200) { if (typeof window.chrome !== 'undefined') { // Chrome version var link = document.createElement('a'); link.href = window.URL.createObjectURL(req.response); link.download = filename; link.click(); } else if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE version var blob = new Blob([req.response], { type: 'application/force-download' }); window.navigator.msSaveBlob(blob, filename); } else { // Firefox version var file = new File([req.response], filename, { type: 'application/force-download' }); window.open(URL.createObjectURL(file)); } } }; req.send(); }