vue 前端下载excel文件模板
vue 前端下载excel文件模板
·
第一步:
//vue3.0版本的在项目public目录下新建static文件夹,放入“文件模板.xlsx”文件。
//vue2.0版本的在项目根目录下的static文件夹,放入“文件模板.xlsx”文件。
第二步:
在按钮中加入事件
<el-button type="warning" @click="downloadTemplate">Excel模板下载</el-button>
第三步:
在 methods中写入如下方法:
downloadTemplate() {
let a = document.createElement("a");
a.href = "./static/template.xlsx";
a.download = "文件模板.xlsx";
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
},
可能会出现的问题:vue中通过a标签下载本地文件报错-文件,未找到
问题的解决:
原因之一:下载的模板文件的名字不可以为中文名,若为中文名会报错找不到文件;
原因之二:下载的模板文件必须放在static里面,vue2.0版本的放在项目根目录下的static文件夹,
但是由于vue3.0版本static取消,文件可以放在public里面,或者在public里面新建一个static文件夹,放到它里面;
原因之三:也是最重要的第一点,url的路径问题,如果使用"../../public/muban.xlsx"的话,会下载一个空文件
因为此时的路径不应该使用相对于当前vue页面的路径,放在public下时,应该使用相对于index.html的路径
即"./"即可,然后就可以访问到了;
当然这是通过绑定在button上了,如果单纯的使用a标签下载的话同理
<a href="./static/template.xlsx" download="模板.xlsx"></a>
更多推荐
已为社区贡献10条内容
所有评论(0)