Vue+SpringBoot 实现Excel表下拉框与模板文件下载

最近做的项目需要实现该功能，经过查找相关博客，故在此做整理。

一、前端

1、在A.service.js文件中

import axios from 'axios'
// 业务服务上下文
const baseUrl = process.env.VUE_APP_BASE_URL
//模板文件下载
const uploadTemplateDownload = () => {return axios({method: 'post',url: `${baseUrl}/A/templateDownload`,responseType: 'blob',headers: { 'content-type': 'application/JSON;charset=UTF-8' }})
}
export { uploadTemplateDownload }

2、在A-condition.vue文件中引入，调用

<template><el-button type="primary" @click="uploadTemplateDownloadBtn">导入模板下载</el-button>
</template>
import { uploadTemplateDownload } from './A.service.js'
export default {methods: {//导入模板文件下载uploadTemplateDownloadBtn() {uploadTemplateDownload().then(res => {console.log(res)const blob = new Blob([res])const fileName = 'A.xlsx'const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL对象document.body.removeChild(elink)}).catch(() => {this.$message.error('导出失败，请检查网络！')})}
}

二、后端

1、在A.java控制层文件中

@RestController
@RequestMapping("/A")
@PostMapping("/templateDownload")public void templateDownload(HttpServletResponse response) throws IOException{try{//用于输出字符流数据或者二进制的字节流数据OutputStream out = response.getOutputStream();//通知浏览器直接下载文件数据,并制定扩展名response.setHeader("content-disposition","attachment;filename=" + URLEncoder.encode(System.currentTimeMillis() + ".xls", "utf-8"));//此数组存储Excel表格中的列名，将会在Excel中展示String[] titles = {"序号","身份证号","姓名","性别","城市","工资"};//创建一个POI的Excel工作簿HSSFWorkbook wb = new HSSFWorkbook();//在工作簿中创建一个表格HSSFSheet sheet1 = wb.createSheet("Sheet1");int rowCount = 0;//创建表格中的行，方法传参需要当前行数Row row = sheet1.createRow(rowCount);rowCount++;Cell cell = null;//添加列名for (int i = 0; i < titles.length; i++) {//在此行中获取一个单元格cell = row.createCell(i);//写入单元格内容cell.setCellValue(titles[i]);}//为第一行赋值row = sheet1.createRow(rowCount);cell = row.createCell(0);cell.setCellValue(1);cell = row.createCell(1);cell.setCellValue("123456789");cell = row.createCell(2);cell.setCellValue("王五");cell = row.createCell(3);cell.setCellValue("男");cell = row.createCell(4);cell.setCellValue("杭州");cell = row.createCell(5);cell.setCellValue("8000");//城市String[] textlist1 = { "广州", "深圳","上海","北京"};sheet1 = setHSSFValidation(sheet1, textlist1, 1, 500, 4, 4);//写出try {wb.write(out);} catch (Exception e) {e.printStackTrace();} finally {try {if (out != null) {out.close();}} catch (IOException e) {e.printStackTrace();}}}catch (Exception e) {e.printStackTrace();}}/*** 设置某些列的值只能输入预制的数据,显示下拉框.* @param sheet 要设置的sheet.* @param textlist 下拉框显示的内容* @param firstRow 开始行* @param endRow 结束行* @param firstCol   开始列* @param endCol  结束列* @return 设置好的sheet.*/public static HSSFSheet setHSSFValidation(HSSFSheet sheet,String[] textlist, int firstRow, int endRow, int firstCol,int endCol) {// 加载下拉列表内容DVConstraint constraint = DVConstraint.createExplicitListConstraint(textlist);// 设置数据有效性加载在哪个单元格上,四个参数分别是：起始行、终止行、起始列、终止列CellRangeAddressList regions = new CellRangeAddressList(firstRow,endRow, firstCol, endCol);// 数据有效性对象HSSFDataValidation data_validation_list = new HSSFDataValidation(regions, constraint);sheet.addValidationData(data_validation_list);return sheet;}

这样子就可以实现Excel表下拉框功能、下载模板文件功能

Vue+SpringBoot 实现Excel表下拉框与模板文件下载相关推荐

Thinkphp5中使用PhpSpreadsheet实现excel特定下拉框联动模板的生成
前言: 最近有遇到过这样的项目需求,需要导出 excel 模板的时候在模板中内置好需要联动的下拉框选择功能,这样在进行excel填写的时候可以进行选择内置的内容. 这里就是进行联动选择的,省.市.区三 ...
java导出Excel增加下拉框选项，解决小数据量和大数据量下拉框选项的问题
文章目录 java导出Excel增加下拉框选项一.小数据量情况二.大数据量情况 java导出Excel增加下拉框选项(java结合easyExcel) 添加传参模型ConsumablesAddDT ...
vue 的elementui中select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...
ExcelJS 导入导出excel带下拉框筛选数据
import ExcelJS from "exceljs"; 配上文档地址下载方法 //数据格式 deviceJson:{ 't(数据类型)':[{value:0 ...
Excel 设置下拉框-显示中文而实际数字
最近在用excel做数据的导入,显示的值和数据库存放值有所差别,需要进行翻译,这里运用excel自带的功能来实现,显示中文,实际数字. Excel 版本:2019 第一步.设置下来框显示在excel ...
Excel怎么下拉框多选
打开Exlce, 确定,然后右击查看代码,把这段代码复制到新建的文件里面此时Excel会给出提示,选择否,,系统会提示保存,在保存的时候选择启用宏的工作簿然后保存,此时Excel下拉框多选就搞定了 ...
【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
vue怎么取消按回车下拉框自动下拉_八月更新第二版，小视频自动竖屏全屏播放，失效校验再次升级！...
新方圆小棉袄,传说中的贴心小棉袄,宇宙无敌超级厉害. 记住我们的付费群(大佬众多):978260150,免费群:1101359539 1.方圆和海阔的规则导入和支付宝口令类似,将口令全部复制打开最新版 ...

Vue+SpringBoot 实现Excel表下拉框与模板文件下载

一、前端

1、在A.service.js文件中

2、在A-condition.vue文件中引入，调用

二、后端

1、在A.java控制层文件中

Vue+SpringBoot 实现Excel表下拉框与模板文件下载相关推荐

最新文章

热门文章