网站浏览器,南京网站制作公司招聘,未来做啥网站致富,网站制作费用申请全部导出
批量导出
报错问题分析 经过排查#xff0c;原因是因为在发起 axios 请求的时候#xff0c;没有指定响应的数据类型#xff08;这里需要指定响应的数据类型为 blob 二进制文件#xff09; 当响应数据回来后#xff0c;会执行 axios 后置拦截器的代码#xff0…
全部导出
批量导出
报错问题分析 经过排查原因是因为在发起 axios 请求的时候没有指定响应的数据类型这里需要指定响应的数据类型为 blob 二进制文件 当响应数据回来后会执行 axios 后置拦截器的代码因为没有对响应头的类型进行判断而是判断为字符串 String将该流转为 JSON 对象而报错 导出的 思路分析 1. 得到用户选中的 ids 数组(前端 vue) 2. 请求导出的后台接口 3. 根据 id,从数据库中查询记录(springboot) 4.拿到数据之后使用流的方式响应给浏览器/客户端 Vue2Elementui
1.新增导出按钮
el-button typeprimary clickexportUsers批量导出/el-button2.将选择的 ids 集合当作参数提交给后端 springboot //导出exportUsers() {//如果没有选择行数据则全部导出或者按照检索条件导出this.$confirm(您是否需要导出, 提示, {iconClass: el-icon-question,//自定义图标样式confirmButtonText: 确认,//确认按钮文字更换cancelButtonText: 取消,//取消按钮文字更换showClose: true,//是否显示右上角关闭按钮type: warning,//提示类型 success/info/warning/error}).then(() {//确认操作//请求批量导出的接口this.$request.get(/user/exportUsersById, {params: { //ids携带过去ids: this.ids //存的是勾选的id的数组},responseType: blob, // 设置响应类型为blob(响应的数据是二进制文件)paramsSerializer: params {//get方法传的参数的是数组解决uri的路径问题 ?ids[]225ids[]226return qs.stringify(params, {indices: false})}}).then(response {// console.log(response, response)if (response.size 0) {//返回的是blob,判断文件的大小this.$message.success(导出成功);} else {this.$message.warning(导出失败);}})}).catch(() {//取消操作});},
3.在 axios 后置拦截器中将 blob 二进制文件转为 excel
import axios from axios
import router from /router;
import {saveAs} from file-saver;//导入该依赖// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response {//简化.data操作 直接使用res.data就能得到数据let res response.data;console.log(res, res)// 判断是否为二进制数据if (response.config.responseType blob) {console.log(该文件是二进制文件)// 从响应头中获取文件名const contentDisposition response.headers.get(Content-Disposition);const filenameRegex /filename(.)/const fileNameMatch contentDisposition contentDisposition.match(filenameRegex);const fileName fileNameMatch fileNameMatch[1];// 对文件名进行解码换原成原始文件名const decodedFileName decodeURIComponent(fileName);// 对文件名进行解码换原成原始文件名// const decodedFileName decodeURIComponent(fileName);// 使用FileSaver库保存文件const blob new Blob([response.data], {type: response.headers[content-type]});// saveAs(blob, file.xlsx);saveAs(blob, decodedFileName || file.xlsx);}// // 兼容服务端返回的字符串数据// if (typeof res string) {// res res ? JSON.parse(res) : res// }// //返回接口的状态码401返回登录页面// if (res.code 401) {// router.push(/login)// }return res;
}, error {console.error(response error: error) // for debugreturn Promise.reject(error)
})
SpringBoot
导入 maven 依赖
dependencygroupIdorg.apache.poi/groupIdartifactIdpoi-ooxml/artifactIdversion4.1.2/version
/dependency
RequestMapping(/exportUsersById)
public void exportUsersById(RequestParam(value ids, required false) ListInteger ids, HttpServletResponse response) {log.info(idList ids);ListUser userList;// 用户数据集合String fileName ;// 文件名if (ObjectUtil.isEmpty(ids) || ids.contains(-1)) {// 全部导出userList UserServiceImpls.list();fileName 所有用户;log.info(所有用户 userList);if (ObjectUtil.isEmpty(userList)) { // 列表为空throw new BizException(用户列表为空);}} else {userList UserServiceImpls.listByIds(ids);// 批量导出fileName 部分用户;log.info(部分用户 userList);}// 使用huTools工具类-Excel导出ExcelWriter writer ExcelUtil.getWriter(true);writer.write(userList, true);response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charsetutf-8);try {// 将Content-Disposition暴露前端才能得到Content-Disposition的value值response.setHeader(Access-Control-Expose-Headers, Content-Disposition);response.setHeader(Content-Disposition, attachment;filename URLEncoder.encode(fileName, utf-8) .xlsx);writer.flush(response.getOutputStream(), true);} catch (IOException e) {// e.printStackTrace();} finally {writer.close();}
}
批量导入
el-uploadstyledisplay: inline-blockactionhttp://localhost:9000/user/importData:headers{token:loginUSer.token}:show-file-listfalse:on-successhandleFileSuccessel-button typesuccess classmy-button批量导入/el-button
/el-upload
/*** 导入数据** param file:* return ResultResponseString* author 卒迹* description TODO* date 17:32*/PostMapping(/importData)
public ResultResponseString importData(MultipartFile file) throws IOException {// 写入文件流ExcelReader reader ExcelUtil.getReader(file.getInputStream());// 以User类的格式导入数据-返回1个集合对象这里取决于alias注解ListUser userList reader.readAll(User.class);if (ObjectUtil.isEmpty(userList)) {// 导入的数据为空return ResultResponse.error(导入失败);}// 写入数据到数据库boolean isSave false;try {isSave UserServiceImpls.saveBatch(userList);} catch (Exception e) {// e.printStackTrace();return ResultResponse.error(导入出错);}return isSave ? ResultResponse.success(导入成功) : ResultResponse.error(导入失败);
}
//导入
handleFileSuccess(response, file, fileList) {console.log(response, response)if (response.code 2000) {this.$message.success(response.message);//刷新数据this.queryUserByUsernameOrName(this.isDisplayMsg false, 1)}if (response.code -1) {this.$message.error(response.message);}},
