vue3中文件下载

vue3中文件下载

可以用原生数据流下载(axios)

发个请求从后台拿数据流

/**
* 例如
*/ 
 axios({
 		method:'post',//请求方式
 		url:url,//请求地址
 		responseType:'blob'//文件流将会被转成blob
 	}).then(res => {
    const blob = new Blob([res.data]);//处理文档流
    const fileName = '帮助文档.docx';
    const down = document.createElement('a');
    down.download = fileName;
    down.style.display = 'none';//隐藏,没必要展示出来
    down.href = URL.createObjectURL(blob);
    document.body.appendChild(down);
    down.click();
    URL.revokeObjectURL(down.href); // 释放URL 对象
    document.body.removeChild(down);//下载完成移除
})

这里说一下用a标签在vue2和vue3的文件下载

在vue2中public下有文件夹static,静态文件资源存放处,需要下载的帮助文档可以放在这里.

当时在vue3中,建立项目时没有static文件夹,这时若是有下载帮助文档的需求,就在public下新建static,然后将文件放在下面就可以了.

// 例如
 <a href='./static/helpFile.docx' download='帮助文档.docx'>帮助文档下载</a>