Vue下载静态文件(解决无法从网站上提取文件)

// HTML结构-文件
<div class="el-upload__tip"
 @click="frontDownload" style="cursor: pointer">
 下载模板
</div>

// 模板下载方法
frontDownload() {
	var a = document.createElement("a");  // 创建一个<a />标签
	a.href = "spc.xlsx";                  // 设置下载文件地址 注意：使用英文
	a.download = "excel模板.xlsx";        // 设置下载文件文件名
	a.style.display = "none";             // 隐藏a标签
	document.body.appendChild(a);         // 将a标签追加到文档对象中
	a.click();                            // 点击，浏览器自动下载
	a.remove();                           // 用完就删除<a />标签

    // const aLink = document.createElement('a')
    // aLink.href = 'spc.xlxs'
    // aLink.setAttribute('download', 'excel模板.xlsx')
    // document.body.appendChild(aLink)
    // aLink.click()
    // document.body.removeChild(aLink)
},

// 文件存放位置
将文件放到public文件下就直接写 文件名 例：spc.xlsx，
如果有二级目录public/static就直接写 地址 例：static/spc.xlsx


// HTML结构-图片
<template>
	<div class="el-upload__tip">	
	  <img :src="require('../../assets/images/Layout.png')">
	</div>
</template>

// 文件存放位置
将文件放到asset/images文件夹里

在Vue中，Excel文件一般放在static文件夹中。

在Vue 2.0版本中，static文件夹与src文件同级。

在Vue 3.0版本中，static文件夹需要放在public文件目录下。

注意：引用路径必须使用英文，防止打包引用地址错乱导致下载失败。