vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑
1. a标签用 :href="../static/1111.xls" download=“文件名称" 下载;但是现在cli已经出到4了,需要将文件放在public里面才不会被打包,需要注意的是:cli2里面需要把要下载的文件放在static下面;3. window.open等等;
a标签的下载功能:
1:bobl ----二进制流文件
Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据
2:responseType
responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’
通过设置responseType为blob,可以直接拿到二进制文件转化为Blob,两种使用 Blob 实现文件下载的方式
3:window.URL.createObjectURL
在浏览器端,实现直接下载文件,就是使用 a标签 来只想文件的下载地址。window.location.href的本质也是这样,因此在拿到二进制文件对应的Blob对象后,需要为这个Blob对象创建一个指向它的下载地址的URL
vuecli2里面,下载静态文件方法:
1. a标签用 :href="../static/1111.xls" download=“文件名称" 下载;
2. location.href=”…/static/1111.xls`"
3. window.open等等;
需要注意的是:cli2里面需要把要下载的文件放在static下面;
但是现在cli已经出到4了,需要将文件放在public里面才不会被打包,
但是同样的方法我们会发现却找不到文件,效果如图:
文件路径:
页面(下载本地文件,不用点击事件,a标签就可以)
结果
修改后
结果1:
结果2:如果打包后下载文件打开为空
原因:基础路径没有添加,所以在打包后,会在发布在测试/预发布/生产的时候会加上相对应的基础路径,而上面那个什么都没有加,所以自测的时候可以但是会在打包发布后会出错
解决方法:加上基础路径
环境配置文件-- .env.development
配置文件-- vue.config.js
代码:
<span
class="clickStyle"
@click="downloadFile(downLoadUrl,'合同付款建议书模板下载')">
合同付款建议书模板下载
</span>
data(){
return{
downLoadUrl:process.env.BASE_URL+"static/files/付款建议书标准.xlsx",
}
}
// 下载
downloadFile (url,fileName) {
console.log(url);
const x = new XMLHttpRequest();
x.open('GET', url, true);
x.responseType = 'blob';
x.onload = function (e) {
const url = window.URL.createObjectURL(x.response);
const elink = document.createElement('a');
elink.href = url;
elink.target = '_self'; // 当前也 target打开新页面
elink.setAttribute('download', fileName);
elink.style.display = 'none';
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
};
x.send();
},
更多推荐
所有评论(0)