前端实现下载功能是依赖于浏览器特性，而非JS特性
第一种 a标签
前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性
这种写法是创造了一个a标签，把地址写到a标签里再用js调用点击，实现访问文件地址就是下载了
代码如下:
html
<a @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)">下载</a>// 参数分别是：文件的路径 文件的名字 文件的id 文件的类型
js
downloadFile(url, fileName, flieId, type) {let link = document.createElement('a');link.style.display = 'none';link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId;document.body.appendChild(link);link.click();},
或者
<a :href='"/user/downloadExcel"' >下载模板</a>//另一种情况是创建div标签，动态创建a标签：
<div name="downloadfile" "downloadExcel()">下载</div>
function downloadExcel() {let a = document.createElement('a')a.href ="/xxx/xxx"a.click();
} 直接下载
a标签的href属性指定下载文件的路径,需要给a标签添加一个download属性，download指定下载文件保存时的名称。
<a href="https://106.14.15.103:8000/downloadFile/test" download="test.txt">下载</a>
第二种 通过window.open()下载
window.open就是打开了一个新网页直接在新网页访问文件地址了，只要访问文件地址，就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了
downloadFile() {window.open(baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc','_self');},
第三种 通过创建iframe的方式
<el-button size="mini" @click="handleExport(scope.row)">导出</el-button>
//method方法：
handleExport(row) {var elemIF = document.createElement('iframe')elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +'&category=' + row.category elemIF.style.display = 'none'document.body.appendChild(elemIF)}
第四种 以文件流的形式，会对后端发post请求，使用blob格式，这种写法对于图片和pdf及svg能实现下载功能
$http({url: this.$http.adornUrl(`/strUrl/${id}`),method: 'get',responseType: 'blob',timeout: 1000 * 600}).then(res => {console.log('res', res)if (res.status === 200) {const blob = new Blob([res.data], { type: `application/octet-stream` })const downloadElement = document.createElement('a')const href = window.URL.createObjectURL(blob)downloadElement.href = hrefdownloadElement.download = `${filename}`downloadElement.click()} else {Elmessage.error('下载出错!')}})
