Vue 下载本地文件夹和图片动态引入(解决无法从网站上提取文件)

1.下载本地文件夹

1.将文件放到public文件层级下
2.html事件

<div class="el-upload__tip" slot="tip"
 @click="frontDownload" style="cursor: pointer">
 下载模板
</div>
1
2
3
4

3.点击触发

//模板下载
frontDownload() {
	var a = document.createElement("a"); // 创建一个<a></a>标签
	a.href = "spc.xlsx";
	a.download = "spc模板.xlsx"; // 设置下载文件文件名
	a.style.display = "none"; // 隐藏a标签
	document.body.appendChild(a); // 将a标签追加到文档对象中
	a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
	a.remove(); // 一次性的，用完就删除a标签
},
1
2
3
4
5
6
7
8
9
10

注意:

1.如果图片在public 文件夹下,就直接写 文件名 例：spc.xlsx，如果有二级目录就直接地址 例：excel/spc.xlsx
否则就会报无法从网站上提取文件的错误

2.图片动态引入

require() 动态引入

文件放到asset文件夹里

<template>
	<div>	
	<img :src="require('../../assets/images/deviceState/Layout.png')">
	</div>
</template>
1
2
3
4
5