前端实现导出csv文档

最新推荐文章于 2025-07-10 11:40:36 发布

weixin_42147400

最新推荐文章于 2025-07-10 11:40:36 发布

阅读量880

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_42147400/article/details/89339934

本文介绍了一种将仪器设备列表数据导出为Excel格式的方法。通过将JSON数据转换为CSV格式，再利用JavaScript创建a标签的方式实现数据下载。详细步骤包括获取数据、格式化数据、生成CSV链接及触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

			tableToExcel() {

				//要导出的json数据
				var jsonData = this.lists
				httpRequest({
						'action': 'equipment_lists',
						'title': this.isStatus ? this.searchcontent : "",
						offset: 100, // 暂时100
						'ord': !this.ord ? "" : !this.ord.order ? "" : this.ord.order == "ascending" ? this.ord.prop + " asc" : this.ord
							.prop + " desc",
					})
					.then(response => {
						if (response.error) {
							this.$message({
								message: response.msg,
								showClose: false,
								type: 'error'
							})
						} else {
							var jsonData = response.data
							//列标题，逗号隔开，每一个逗号就是隔开一个单元格
							let str = `序号,仪器设备名称,型  号,生产厂家,出厂编号,科室,固定资产编号,仪器编号,存放位置,维护人,仪器授权人,检定/校准,检定/校准有效期,采购日期,维修工程师,联系方式,通讯地址\n`;
							//增加\t为了不让表格显示科学计数法或者其他格式
							for (let i = 0; i < jsonData.length; i++) {
								str += `${(i+1)+'\t'},`;
								str += `${jsonData[i]['title'] + '\t'},`;
								str += `${jsonData[i]['model'] + '\t'},`;
								str += `${jsonData[i]['supplier'] + '\t'},`;
								str += `${jsonData[i]['factory_no'] + '\t'},`;
								str += `${jsonData[i]['lab_name'] + '\t'},`;
								str += `${jsonData[i]['fixed_assets_no'] + '\t'},`;
								str += `${jsonData[i]['equipment_no'] + '\t'},`;
								str += `${jsonData[i]['position'] + '\t'},`;
								str += `${jsonData[i]['maint_person']?jsonData[i]['maint_person']:"" + '\t'},`;
								// str+=`${jsonData[i]['authorizer'] + '\t'},`;
								var authorizerList = JSON.parse(jsonData[i]['authorizer'])
								var len = 0;
								if (authorizerList) {
									len = authorizerList.length
								}
								for (let j = 0; j < len; j++) {
									str += `${this.getAuthorizer(authorizerList[j]) + '|'}`;
								}
								str += `${'\t'},`;
								str += `${this.getCheck(0,0,jsonData[i]['docimasy']) + '\t'},`;
								str += `${this.dateFormat(0,0,jsonData[i]['check_time']) + '\t'},`;
								str += `${this.dateFormat(0,0,jsonData[i]['purchased_time']) + '\t'},`;
								str += `${jsonData[i]['check_person']?jsonData[i]['check_person']: "" + '\t'},`;
								str += `${jsonData[i]['phone']?jsonData[i]['phone']: "" + '\t'},`;
								str += `${jsonData[i]['address']?jsonData[i]['address']: "" + '\t'},`;
								str += '\n';
							}
							//encodeURIComponent解决中文乱码
							let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
							//通过创建a标签实现
							var link = document.createElement("a");
							link.href = uri;
							//对下载的文件命名
							link.download = "仪器列表导出.csv";
							document.body.appendChild(link);
							link.click();
							document.body.removeChild(link);
						}
					})
			}
			<script>