xlsx和path的运用
从后端获取Excel模板
app.get('/api/download-template', (req, res) => {
const templatePath = path.join(__dirname, './datafile/example.xlsx');
res.download(templatePath);
});
在前端页面，表单采用Elementui设计。利用axios接收Excel 模板文件 URL。填写表单，将信息存储在Excel模板文件中，并且下载下来。
<template>
<div class="farther">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="设备名称">
<el-input v-model="form.eqname"></el-input>
</el-form-item>
<el-form-item label="规格型号">
<el-input v-model="form.modelsize"></el-input>
</el-form-item>
<el-form-item label="设备编号">
<el-input v-model="form.eqnumber"></el-input>
</el-form-item>
<el-form-item label="监测地点">
<el-input v-model="form.addr"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="form.company"></el-input>
</el-form-item>
<el-form-item label="运行单位">
<el-input v-model="form.yxdw"></el-input>
</el-form-item>
<el-form-item label="维护内容">
<el-input v-model="form.content"></el-input>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date"
style="width: 100%"
></el-date-picker>
</el-form-item>
<el-form-item label="查询日志">
<el-select v-model="form.journal" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="×"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检查耗材">
<el-select v-model="form.haoc" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="站房卫生">
<el-select v-model="form.weis" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="站房门窗的密封性检查">
<el-select v-model="form.mifeng" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="供电系统">
<el-select v-model="form.gdian" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="室内温湿度">
<el-select v-model="form.shid" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="空调">
<el-select v-model="form.ktiao" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="自来水供应情况">
<el-select v-model="form.gyqk" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="采样泵采水情况">
<el-select v-model="form.csqk" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="采样管路通畅">
<el-select v-model="form.cytc" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="自动清洗装置运行情况">
<el-select v-model="form.yunx" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="排水管路通畅">
<el-select v-model="form.pais" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="清洗采样泵、过滤装置">
<el-select v-model="form.guol" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="清洗采样管路、排水管路">
<el-select v-model="form.caiy" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仪器报警状态">
<el-select v-model="form.baoj" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仪器状态参数检查">
<el-select v-model="form.ztai" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仪器外观检查">
<el-select v-model="form.wguan" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仪器内部管路通畅">
<el-select v-model="form.tchang" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仪器进样、排液管路清洁检查">
<el-select v-model="form.jiancha" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检查电极标准液、内充液">
<el-select v-model="form.yeti" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="清洗电极头">
<el-select v-model="form.qingxi" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据采集系统报警信息">
<el-select v-model="form.xinxi" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据上传情况">
<el-select v-model="form.changchuan" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据采集情况">
<el-select v-model="form.qingkuang" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检查数采仪和仪器的连接">
<el-select v-model="form.lianjie" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检查上传数据和现场数据的一致性">
<el-select v-model="form.yizhi" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据采集、传输设备电源">
<el-select v-model="form.dainyaun" placeholder="请选择情况">
<el-option label="正常" value="√"></el-option>
<el-option label="不正常" value="X"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="downloadExcel">生成并下载</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import * as XLSX from 'xlsx';
import http from '@/utils/request';
export default {
data() {
return {
form: {
eqname: '',
modelsize: '',
eqnumber: '',
addr: '',
company: '',
yxdw: '',
content: '',
date: '',
journal: '',
haoc: '',
weis: '',
mifeng: '',
gdian: '',
shid: '',
ktiao: '',
gyqk: '',
csqk: '',
cytc: '',
yunx: '',
pais: '',
guol: '',
caiy: '',
baoj: '',
ztai: '',
wguan: '',
tchang: '',
jiancha: '',
yeti: '',
qingxi: '',
xinxi: '',
changchuan: '',
qingkuang: '',
lianjie: '',
yizhi: '',
dainyaun: '',
},
excelTemplateUrl: '', // 后端返回的 Excel 模板文件 URL
};
},
methods: {
async downloadExcel() {
console.log('获取模板');
try {
// const response = await axios.get('/api/download-template', { responseType: 'arraybuffer' });
await http.get('/download-template', { responseType: 'arraybuffer' })
.then(({ data }) => {
const excelData = new Uint8Array(data);
const workbook = XLSX.read(excelData, { type: 'array' });
const worksheet = workbook.Sheets['Sheet1'];
// 在 Excel 模板中填充表单数据
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.eqname]], { origin: 'C2' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.modelsize]], { origin: 'H2' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.eqnumber]], { origin: 'C3' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.addr]], { origin: 'H3' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.company]], { origin: 'C4' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.yxdw]], { origin: 'H4' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.content]], { origin: 'C5' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.date]], { origin: 'E6' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.journal]], { origin: 'D8' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.haoc]], { origin: 'D9' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.weis]], { origin: 'D10' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.mifeng]], { origin: 'D11' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.gdian]], { origin: 'D12' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.shid]], { origin: 'D13' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.ktiao]], { origin: 'D14' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.gyqk]], { origin: 'D15' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.csqk]], { origin: 'D16' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.cytc]], { origin: 'D17' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.yunx]], { origin: 'D18' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.pais]], { origin: 'D19' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.guol]], { origin: 'D20' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.caiy]], { origin: 'D21' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.baoj]], { origin: 'D22' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.ztai]], { origin: 'D23' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.wguan]], { origin: 'D24' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.tchang]], { origin: 'D25' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.jiancha]], { origin: 'D26' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.yeti]], { origin: 'D27' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.qingxi]], { origin: 'D28' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.xinxi]], { origin: 'D29' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.changchuan]], { origin: 'D30' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.qingkuang]], { origin: 'D31' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.lianjie]], { origin: 'D32' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.yizhi]], { origin: 'D33' });
XLSX.utils.sheet_add_aoa(worksheet, [[this.form.dainyaun]], { origin: 'D34' });
// 其他字段的填充，可以参考上面的示例进行添加
const excelOutputData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelOutputData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'result.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
} catch (error) {
console.error(error);
}
},
},
};
</script>
<style scoped lang="less">
* {
margin: 0;
padding: 0;
}
.farther {
height: 100%;
width: 100%;
overflow-y: scroll; /* 启用垂直滚动条 */
}
</style>
xlsx和path的运用的更多相关文章
- POI读取xls和xlsx
import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...
- 如何处理大体积 XLSX/CSV/TXT 文件？
在开发过程中,可能会遇到这样的需求,我们需要从本地的 Excel 或 CSV 等文件中解析出信息,这些信息可能是考勤打卡记录,可能是日历信息,也可能是近期账单流水.但是它们共同的特点是数据多且繁杂,人 ...
- 121_Power Query之R.Execute的read.xlsx&ODBC
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.问题 pq在用 Excel.Workbook 读取一些Excel早期版本(.xls后缀)的文件时候,报错:DataFo ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- java 用 jxl poi 进行excel 解析 *** 最爱那水货
/** * 解析excel文件 ,并把数据放入数组中 格式 xlsx xls * @param path 从ftp上下载到本地的文件的路径 * @return 数据数组集合 */ public Lis ...
- Python+Selenium进行UI自动化测试项目中，常用的小技巧3：写入excel表（python，xlsxwriter）
我们在项目中可能用到excel表生成,下面的代码就是对excel表的操作: import xlsxwriter import datetime class write_excel(): def __i ...
- excel读入数据库
POI3.9效率大幅度提高,支持xls以及xlsx. 首先需要POI的JAR包,MAVEN配置如下: <!-- excel start --> <dependency> < ...
- java导出和读取excel数据
使用的是poi的jar包 下载地址http://poi.apache.org/download.html 主要是把jar包导入,直接新建一个列子测试一下就明白了.使用起来还是比较方便的,代码里面的原理 ...
- Java POI读取Excel数据,将数据写入到Excel表格
1.准备 首先需要导入poi相应的jar包,包括: 下载地址:http://pan.baidu.com/s/1bpoxdz5 所需要的包的所在位置包括: 2.读取Excel数据代码 package S ...
- 基于python的接口自动化测试+ddt数据驱动
在测试接口时,一个接口会先写好测试用例,这个用例主要针对功能,传入参时考虑到各种场景,正常的,异常的,如:参数缺省,参数传一个六位数字写用例时考虑边界情况等. 一个接口设计用例时有可能会十几条到几十条 ...
随机推荐
- IntelliJ IDEA上手这一篇就够了，从入门到上瘾
前言 每次换电脑,最最最头疼的事情莫过于安装各种软件和搭建开发环境.这算是不想换电脑的一个原因吧(最主要还是穷).除非是电脑坏了开不了机或者点一下卡一下,真不想换电脑.每次换电脑都得折腾好久. 趁着这 ...
- 卷积神经网络（Convolutional Neural Network,CNN）思想 实例 具体代码实现
在前面我们讨论了神经网络初步,学习了神经网络中最基础的部分:全连接层,并且实现了搭建两层全连接实现图片分类的问题,达到了50%左右的正确率,全连接层的主要思想是构建出一个映射函数,使得前一层的所有输入 ...
- Linux 服务器更换主板后，网卡识别失败的处理方法
上周日,由于断电,公司所在的集群服务器在关机断电重启后,发现唯一的一个登陆节点主板出现了故障,以致于 log 登陆节点的 Red Hat Enterprise 6 系统无法启动. 由于集群是生信所有分 ...
- CSS 图片加载提前占位 padding-top、padding-bottom
今天聊一个图片加载提前占位的一个问题 ,内容比较适合初学者. 起因 在响应式页面当中,图片加载之前是不知道图片高度的,加载成功图片完全撑开.如果不做提前占位会把下面的内容挤下去,页面出现抖动,就像下面 ...
- Nexus3 重置 admin 账号密码
问题背景 nexus3 的 admin 账号密码忘记了,需要重置. 环境说明 nexus 基于 docker-compose 部署,版本 nexus3.26 docker 镜像 sonatype/ne ...
- 从0搭建Vue3组件库(十):如何搭建一个 Cli 脚手架
本篇文章将实现一个名为create-easyest脚手架的开发,只需一个命令npm init easyest就可以将整个组件库开发框架拉到本地. 创建 Cli 包 首先,我们在 packages 目录 ...
- C++面试八股文：用过STL吗？
某日二师兄参加XXX科技公司的C++工程师开发岗位第21面: 面试官:用过STL吗? 二师兄:(每天都用好吗..)用过一些. 面试官:你知道STL是什么? 二师兄:STL是指标准模板库(Standar ...
- React学习时，outlet 路由配置 （prop传参处理，跳转的实现，父子数据共享）
index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App' ...
- Spring容器获取Bean的9种方式
1 前言 随着SpringBoot的普及,Spring的使用也越来越广,在某些场景下,我们无法通过注解或配置的形式直接获取到某个Bean.比如,在某一些工具类.设计模式实现中需要使用到Spring容器 ...
- 从头学Java17-Stream API（一）
Stream API Stream API 是按照map/filter/reduce方法处理内存中数据的最佳工具. 本系列中的教程包含从基本概念一直到collector设计和并行流. 在流上添加中继操 ...