关于
前端导出
文件打不开的问题
前言：不知道小伙伴们在开发当中有没有遇到这样的问题，业务需求是需要导出
一个文件，后端会返回回来
一个文件流，然后我们需要将其处理
成为
一个文件类型，常用的是导出
excel文件。
如果在百度上一搜会发现其实很简单，思路大概是这样的
Blob类型
创建a标签
指定href为URL
设置download属性来指定
文件名
代码大概是这样的。
const downloadDoc = function(content, filename) {
在简单的项目中
下载文件的方法都是通过
一个get
请求来
下载文件，随着前后端分离，
前端使用前端框架（vue，anglajs等）之类的node.js
通过异步
请求来关联前后端，
下载文件的时候
使用get方式
请求后端
下载文件时，就显得不太合适。
下面介绍如何通过
ajax异步
请求下载一个zip压缩
文件
前端发送
一个ajax请求
var self = this;
this.$http({
method:'post',
要实现下载Excel的功能，思路很简单，后台servlet根据数据库的数据生成Excel保存在指定位置，然后保存到response的输入流中，最后将零时的Excel删除：
private void download(String path, HttpServletResponse response) throws IOException {
//path是指欲下载的文件的路径
button ajax触发后台处理数据并保存到xlsx文件中，但是下载的时候利用
header("Content-Type:application/octet-stream");
header("Accept-Ranges:bytes");
header("Accept-Length: " . filesize($file_dir));
he...
导出 Excel，是后端来做的。 toExcel = () => {
///在实际项目中，实际上这个功能是前端发送一个 ajax 请求到后端，然后后端返回一个文件下载的地址。
}安装npm i xlsx -Sindex.js：import React, { Component } from 'react'
import moment from 'moment'
import X...
public static String downloadFile(HttpServletResponse response, String fileName, String templatePath) {
response.setHeader("content-type", "application/octet-stream");
// 如果下载的文件是固定的，那么指定文件类型
response.setContentType("application/vnd.ms-excel;ch
一.开始的时候代码类似这种写法
$.
ajaxFileUpload({
url: '${root}/manage/custIcCard/upload
Excel?projectCode=' + projectCode + '&icType=' + icType, //用于
文件上传的服务器端
请求地址
secureuri: false, //是否需要安全协议，一般设置为false...
实现上传
excel文件并将数据传输到数据库的步骤如下：
1.
前端实现
文件上传功能：
使用Vue.js开发
前端页面，
使用element-ui组件库实现
文件上传组件。具体实现可以参考element-ui的文档和示例代码。
2. 后端实现
文件上传功能：
使用Spring Boot框架开发后端接口，
使用Apache POI或者Easy
Excel解析
Excel文件并将数据存入数据库。具体实现可以参考Spring Boot官方文档和Easy
Excel的官方文档。
3.
前后端交互：
前端页面通过
Ajax请求后端接口上传
文件，并将
文件数据以form-data格式传输到后端。后端接口接收到
请求后，解析
Excel文件并将数据存入数据库，最后返回上传结果给
前端。
下面是
一个简单的示例代码，仅供参考：
前端代码：
```vue
<template>
<el-upload
class="upload-demo"
action="/api/upload"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
<i class="el-icon-upload"></i>
<div class="el-upload__text">将
Excel 文件拖到此处，或点击上传</div>
<div class="el-upload__tip" slot="tip">仅支持 .xls 和 .xlsx 格式的
Excel 文件</div>
</el-upload>
</template>
<script>
export default {
methods: {
beforeUpload(file) {
const is
Excel =
file.type === 'application/vnd.ms-
excel' ||
file.type ===
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (!is
Excel) {
this.$message.error('只能上传 .xls 或 .xlsx 格式的
Excel 文件');
return is
Excel;
onSuccess(response) {
if (response.code === 0) {
this.$message.success('上传
成功');
} else {
this.$message.error(`上传失败: ${response.msg}`);
onError(error) {
this.$message.error(`上传失败: ${error.message}`);
</script>
后端代码：
```
java
@RestController
@RequestMapping("/api")
public class UploadController {
@PostMapping("/upload")
public Result<?> upload(@RequestParam("file") MultipartFile file) throws IOException {
if (file.isEmpty()) {
return Result.error("上传失败:
文件为空");
String filename = file.getOriginalFilename();
String ext = FilenameUtils.getExtension(filename);
if (!"xls".equals(ext) && !"xlsx".equals(ext)) {
return Result.error("上传失败: 仅支持 .xls 或 .xlsx 格式的
Excel 文件");
List<User> userList = new ArrayList<>();
Workbook workbook = WorkbookFactory.create(file.getInputStream());
Sheet sheet = workbook.getSheetAt(0);
for (int i = 1; i <= sheet.getLastRowNum(); i++) {
Row row = sheet.getRow(i);
if (row == null) {
continue;
User user = new User();
user.setName(row.getCell(0).getStringCellValue());
user.setAge((int) row.getCell(1).getNumericCellValue());
user.setGender(row.getCell(2).getStringCellValue());
userList.add(user);
userService.saveAll(userList);
return Result.ok();
上述代码中，`UploadController`是
一个Spring MVC的控制器类，用于处理上传
文件的
请求。`upload`方法接收
一个`MultipartFile`类型的参数，即
前端上传的
文件数据。在方法中，我们首先判断
文件是否为空，然后根据
文件的扩展名判断是否为
Excel文件。如果不是
Excel文件，则返回上传失败的结果。否则，我们
使用Apache POI库解析
Excel文件，将数据转换
成`User`对象并存入数据库。最后，返回上传
成功的结果。
需要注意的是，上述代码中的`User`对象是
一个自定义的
Java类，用于存储
Excel中的数据。在实际开发中，需要根据实际情况定义相应的
Java类来存储数据。同时，还需要在Spring Boot的配置
文件中配置数据库连接信息、数据源等相关信息。
