Spring boot + Vue&element ui+eazypoi导出

前端代码:

<el-button   class="filter-item" type="success" size="mini" plain icon="el-icon-download"
                   @click="exportExcel">
          导出
        </el-button>

exportExcel方法:

  exportExcel() {
      download(this.table.searchForm).then(res => {
        const blob = new Blob([res.data])
        const filename = res.headers['content-disposition']
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = decodeURIComponent(filename.split('filename=')[1])
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      }).catch(function (error) {
        console.log(error);
      })
    },

实体类:

@Data
public class LogExcel {
    @Excel(name = "登录名称" ,width = 20,needMerge = true)
    private String username;
    @Excel(name = "模块名称" ,width = 20,needMerge = true)
    private String module;
    @Excel(name = "操作" ,width = 20,needMerge = true)
    private String handle;
    @Excel(name = "操作时间" ,width = 20,needMerge = true)
    private String createDate;
    @Excel(name = "请求地址" ,width = 20,needMerge = true)
    private String requestUri;
    @Excel(name = "请求方法" ,width = 20,needMerge = true)
    private String requestMethod;
    @Excel(name = "请求参数" ,width = 20,needMerge = true)
    private String requestParams;
    @Excel(name = "响应结果" ,width = 20,needMerge = true)
    private String responseResult;
    @Excel(name = "响应时间" ,width = 20,needMerge = true)
    private Long responseTime;

    private String fromTime;
    private String toTime;
}

后端impl代码:

@Override
    public Workbook excelOut(LogExcel logExcel) {
        List<LogExcel> log = logMapper.logExcelOut(logExcel);
        ExportParams exportParams = new ExportParams();
        exportParams.setSheetName("日志");
        Map<String, Object> map = new HashMap<>();
        // title的参数为ExportParams类型,目前仅仅在ExportParams中设置了sheetName
        map.put("title", exportParams);
        // 模版导出对应得实体类型,即包含了List的对象
        map.put("entity", LogExcel.class);
        // sheet中要填充得数据
        map.put("data", log);
        List<Map<String, Object>> sheetsList = new ArrayList<>();
        sheetsList.add(map);
        return ExcelExportUtil.exportExcel(sheetsList, ExcelType.HSSF);
    }

controller:

@PostMapping("/download")
    @ResponseBody
    @PreAuthorize("hasPermission('/core/log/download','b:log:open')")
    public void exportDaIlyTable( @RequestBody LogExcel logExcel, HttpServletResponse response) throws IOException {
        Workbook workbook = logService.excelOut(logExcel);
        String fileName = URLEncoder.encode("日志.xlsx" , "UTF-8");
        //设置响应头,控制浏览器下载该文件
        response.reset();
        response.setHeader("Content-disposition", "attachment;filename=" + fileName);
        response.setHeader(Constants.HEADER_DOWNLOAD, "true");
        response.setContentType("application/octet-stream");
        //创建输出流
        OutputStream out = response.getOutputStream();
        workbook.write(out);
        //关闭输出流
        out.close();
    }

在发请求的时候需要加上  

responseType: 'blob'

导出:

### 使用 Spring BootVue 结合 EasyPOI 实现 PDF 导入导出 #### 易用性介绍 EasyPOI 是一款用于简化 Excel 和 Word 文档操作的 Java 库,支持快速读写文件并提供多种模板引擎来满足不同场景下的需求[^1]。 然而值得注意的是,尽管 EasyPOI 主要专注于 Office 文件格式(如 Excel 和 Word),它并不直接支持 PDF 文件的操作。对于 PDF 处理的需求,通常会推荐使用其他专门针对 PDF 的库,比如 Apache PDFBox 或 iTextPDF 来替代或补充 EasyPOI 功能[^2]。 #### 技术栈概述 为了完成基于 Web 的应用程序中的 PDF 导入导出任务,可以采用如下技术组合: - **前端**: Vue.js 配合 Element UI 组件库构建用户界面; - **后端**: Spring Boot 提供 RESTful API 接口服务; - **工具包**: 对于 PDF 操作,则引入第三方依赖项如 `org.apache.pdfbox` 或者 `com.itextpdf`. #### 后端实现 (Spring Boot) ##### 编写实体类 定义数据传输对象 DTO 用来封装请求参数以及响应结果的数据结构: ```java public class PdfExportDTO { private String title; private List<String> content; // Getters and Setters... } ``` ##### 控制器层 创建控制器接收来自客户端发出的 HTTP 请求,并调用业务逻辑方法执行具体操作: ```java @RestController @RequestMapping("/api/pdf") public class PdfController { @Autowired private IPdfService pdfService; @GetMapping(value="/export", produces="application/pdf") public ResponseEntity<byte[]> exportPdf(@RequestParam Map<String,Object> param){ byte[] data = this.pdfService.createPdf(param); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("filename","example.pdf"); return new ResponseEntity<>(data,headers,HttpStatus.OK); } } ``` 此处假设存在名为 `IPdfService` 的接口负责实际生成 PDF 文件的工作;而返回类型被设定为字节数组形式以便通过网络流的方式传递给浏览器下载[^3]. #### 前端实现 (Vue + Axios) 在 Vue 中发起 GET 请求时需特别指定响应体的内容类型为 Blob 形式,这样才能正确解析服务器传回的大文件资源: ```javascript // 导出PDF函数 function exportPdf() { axios({ url: '/api/pdf/export', method: 'GET', responseType: 'blob' }).then((res)=>{ const link=document.createElement('a'); let blob=new Blob([res.data],{type:'application/pdf'}); link.href=URL.createObjectURL(blob); link.download='example.pdf'; document.body.appendChild(link); link.click(); }); } ``` 上述 JavaScript 函数展示了如何动态创建 `<a>` 标签并通过其触发默认保存对话框让用户选择本地存储位置. #### 相关问题§§ 1. 如何配置 Maven 工程以加入必要的 PDF 操作库? 2. 是否有更简便的方法可以在不改变现有架构的情况下集成 PDF 支持到已有项目里? 3. 当遇到大体积文档时应采取哪些优化措施提高性能表现? 4. 怎样确保生成后的 PDF 符合特定的安全性和合规性标准? 5. 能否举例说明一些常见的错误及其解决方案,在尝试此方案过程中可能会碰到?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值