Vue中实现图片下载到本地功能和导出（下载）excel文件功能：_vue 下载图片

一、实现图片下载到本地功能

需求：

将勾选的列表项的id传给后台，让后台处理并下载对应的图片
1

1、 后台接口：

下载图片zip：

GET  	        /download
请求数据类型  	application/x-www-form-urlencoded	响应数据类型[ "*/*" ]
1
2

请求参数：

2、前端Vue页面：

template：

<div>
   <div class="imgIcon"  @click="downImgZip"></div>
   <el-button  type="success" @click="downImgZip">下载图片</el-button>
</dic>

表单Table：
<el-table :row-key="getRowKey" @selection-change="handleSelectionChange">

	<el-table-column type="selection" :reserve-selection="true" align="center" width="55">
	</el-table-column>//这个为勾选框
	......
	
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13

script：

import qs from "qs";//引入qs插件
1

data：

 tableCheckList: [],//存放选中该行的表单数据
1

method：

getRowKey(row){//拿到该选中的表单的id
	return row.id
},
handleSelectionChange(val){//拿到该选中的表单的全部数据
	this.tableCheckList=val;
},
downImgZip() {
      let ids = [];
      //if (this.shitumos == 2) {
        //ids = this.$refs.shitumosDialog.checkList;//获取另一个视图选中的id（根据需求决定这个是否需要）
      //} else {
        this.tableCheckList.map(item => {//遍历获取表格的选中的id
          // console.log(item.id);
          ids.push(item.id);
        });
      //}
      if (ids.length == 0) {
        this.$notify({
          title: "提示",
          message: "请勾选需要下载的图片",
          type: "warning",
          duration: 2000
        });
        return;
      }
      let param = {
        ids: ids,
        ...this.dataForm,
        //...JSON.parse(JSON.stringify(this.dataForm))//dataForm为获取到的数据，里面不能有ids
      };
      //if (this.dataForm.cllxLb && this.dataForm.cllxLb.length) {
          //params.cllx = this.dataForm.cllxLb.join()
      //}			//注释的根据需求来写
      //delete param.pageNum;//删除不要的参数
      //delete param.pageSize;
      let dataUrl = `download?` + qs.stringify(param);
      window.open(dataUrl); //用window.open()实现下载到本地
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

备注：

	（1）window.open()要先判断是否会被浏览器拦截
	
	（2）qs.stringify()将对象 序列化成URL的形式，以&进行拼接
			qs.stringify({ a: ['b', 'c', 'd'] });     // 'a[0]=b&a[1]=c&a[2]=d'
			
	（3）qs.parse()将URL解析成对象的形式
	
	（4）JSON.parse() ：将JSON字符串转换成对象
	
	（5）JSON.stringify() ：将JS对象转换为JSON格式
	
	（6）JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
			JSON:let str = '{"a":"test","b":123}' //这是一个 JSON 字符串，本质是一个字符串
			JS对象：let str = { a: "test", b: 123 } //这是一个对象，注意键名也是可以使用引号包裹的
1
2
3
4
5
6
7
8
9
10
11
12
13
14

window.open()不能在template里面使用=>data定义了window:window

二、实现导出（下载）文件excel功能：

后台接口    /download
没有请求参数，文件格式后台已完成
1
2

需求：
只需使用接口下载execl文件到本地（此时接口就相当于连接）
解决：

<a @click="download(item)">保存到本地</a>

methods:{
	//使用接口
	downLoadFile(){
		let dataUrl = `/api/download`;
      	window.open(dataUrl);
	},
	//使用a标签
	download(item){
		let a=document.createElement('a')
		a.style.display="none"
		a.download=item.downloadName //下载名称
		a.href=item.downloadUrl   //下载链接
		document.body.appendChild(a)
		a.click()
		document.body.appendChild('a')
	
		//将下载的id传给后台（根据需要选择）
		download({id:item.id}).then(res=>{
			这里调用更新页面数据
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24