SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF

ゝ一世哀愁。 2023-10-01 17:30 8阅读 0赞

## 场景 ##

SpringBoot加itext实现PDF导出：

[SpringBoot加itext实现PDF导出\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][SpringBoot_itext_PDF_BADAO_LIUMANG_QIZHI_-CSDN]

上面实现导出pdf的基础上，怎样结合前端Vue发送请求实现导出pdf。

![fdc7bee005054edc89bfe690138c2ee7.gif][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、搭建前后端分离的架构

若依前后端分离版本地搭建开发环境并运行项目的教程：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客\_若依前后端分离文档][BADAO_LIUMANG_QIZHI_-CSDN]

2、后台引入Itext依赖

<dependency>
                <groupId>com.itextpdf</groupId>
                <artifactId>itextpdf</artifactId>
                <version>5.2.0</version>
            </dependency>
            <dependency>
                <groupId>com.itextpdf</groupId>
                <artifactId>itext-asian</artifactId>
                <version>5.2.0</version>
            </dependency>

3、新建Controller

package com.ruoyi.web.controller.system;
    
    import com.itextpdf.text.*;
    import com.itextpdf.text.pdf.*;
    import com.ruoyi.common.core.controller.BaseController;
    import com.ruoyi.common.core.domain.AjaxResult;
    import com.ruoyi.system.domain.TwoZhuModel;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.OutputStream;
    import java.net.URLEncoder;
    import java.util.*;
    import java.util.List;
    
    @Controller
    @RequestMapping("/exportPdf")
    public class ExportPDFController extends BaseController
    {
    
        @RequestMapping("/getPdf")
        public void excelPdf(HttpServletRequest request, HttpServletResponse response) throws Exception {
            //设置响应格式等
            response.setContentType("application/pdf");
            response.setHeader("Expires", "0");
            response.setHeader("Cache-Control", "must-revalidate, post-check=0, pre-check=0");
            response.setHeader("Pragma", "public");
            Map<String,Object> map = new HashMap<>();
            //设置纸张规格为A4纸
            Rectangle rect = new Rectangle(PageSize.A4);
            //创建文档实例
            Document doc=new Document(rect);
            //添加中文字体
            BaseFont bfChinese=BaseFont.createFont("STSong-Light", "UniGB-UCS2-H", BaseFont.NOT_EMBEDDED);
            //设置字体样式
            Font textFont = new Font(bfChinese,11, Font.NORMAL); //正常
            //Font redTextFont = new Font(bfChinese,11,Font.NORMAL,Color.RED); //正常,红色
            Font boldFont = new Font(bfChinese,11,Font.BOLD); //加粗
            //Font redBoldFont = new Font(bfChinese,11,Font.BOLD,Color.RED); //加粗,红色
            Font firsetTitleFont = new Font(bfChinese,22,Font.BOLD); //一级标题
            Font secondTitleFont = new Font(bfChinese,15,Font.BOLD, CMYKColor.BLUE); //二级标题
            Font underlineFont = new Font(bfChinese,11,Font.UNDERLINE); //下划线斜体
            //设置字体
            com.itextpdf.text.Font FontChinese24 = new com.itextpdf.text.Font(bfChinese, 24, com.itextpdf.text.Font.BOLD);
            com.itextpdf.text.Font FontChinese18 = new com.itextpdf.text.Font(bfChinese, 18, com.itextpdf.text.Font.BOLD);
            com.itextpdf.text.Font FontChinese16 = new com.itextpdf.text.Font(bfChinese, 16, com.itextpdf.text.Font.BOLD);
            com.itextpdf.text.Font FontChinese12 = new com.itextpdf.text.Font(bfChinese, 12, com.itextpdf.text.Font.NORMAL);
            com.itextpdf.text.Font FontChinese11Bold = new com.itextpdf.text.Font(bfChinese, 11, com.itextpdf.text.Font.BOLD);
            com.itextpdf.text.Font FontChinese11 = new com.itextpdf.text.Font(bfChinese, 11, com.itextpdf.text.Font.ITALIC);
            com.itextpdf.text.Font FontChinese11Normal = new com.itextpdf.text.Font(bfChinese, 11, com.itextpdf.text.Font.NORMAL);
    
            //设置要导出的pdf的标题
            String title = "霸道流氓气质";
            response.setHeader("Content-disposition","attachment; filename=".concat(String.valueOf(URLEncoder.encode(title + ".pdf", "UTF-8"))));
            OutputStream out = response.getOutputStream();
            PdfWriter.getInstance(doc,out);
            doc.open();
            doc.newPage();
            //新建段落
            //使用二级标题 颜色为蓝色
            Paragraph p1 = new Paragraph("二级标题", secondTitleFont);
            //设置行高
            p1.setLeading(0);
            //设置标题居中
            p1.setAlignment(Element.ALIGN_CENTER);
            //将段落添加到文档上
            doc.add(p1);
            //设置一个空的段落，行高为18  什么内容都不显示
            Paragraph blankRow1 = new Paragraph(18f, " ", FontChinese11);
            doc.add(blankRow1);
            //新建表格 列数为2
            PdfPTable table1 = new PdfPTable(2);
            //给表格设置宽度
            int width1[] = {80,60};
            table1.setWidths(width1);
            //新建单元格
            String name="霸道的程序猿";
            String gender="男";
            //给单元格赋值 每个单元格为一个段落，每个段落的字体为加粗
            PdfPCell cell11 = new PdfPCell(new Paragraph("姓名：  "+name,boldFont));
            PdfPCell cell12 = new PdfPCell(new Paragraph("性别：  "+gender,boldFont));
            //设置单元格边框为0
            cell11.setBorder(0);
            cell12.setBorder(0);
            table1.addCell(cell11);
            table1.addCell(cell12);
            doc.add(table1);
            PdfPTable table3 = new PdfPTable(2);
            table3.setWidths(width1);
            PdfPCell cell15 = new PdfPCell(new Paragraph("博客主页： https://blog.csdn.net/BADAO_LIUMANG_QIZHI  ",boldFont));
            PdfPCell cell16 = new PdfPCell(new Paragraph("当前时间：  "+new Date().toString(),boldFont));
            cell15.setBorder(0);
            cell16.setBorder(0);
            table3.addCell(cell15);
            table3.addCell(cell16);
            doc.add(table3);
            doc.close();
        }
    
    
    }

具体方法和布局可以参考itext官网或如下

Itext实现导出PDF常用方法说明：

[Itext实现导出PDF常用方法说明\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Itext_PDF_BADAO_LIUMANG_QIZHI_-CSDN]

4、新建Vue页面，页面添加按钮

<button type="button" style="margin-top: 20px;" @click="btnClick">请求文件流的方式导出PDF</button>

5、按钮点击事件

methods: {
        btnClick(){   
         exportPDF().then((res)=>{
              //导出文件名
              var filename = '霸道的程序猿';
              //创建url
              let url = window.URL.createObjectURL(res)
              //创建a标签 并设置属性
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', filename + '.pdf')
              //添加a标签
              document.body.appendChild(link)
              //执行下载
              link.click();
              //释放url对象
              URL.revokeObjectURL(link.href);
              //释放a标签
              document.body.removeChild(link);
         });
        },
      },

点击事件中调用了引入的方法exportPDF

import {
      exportPDF
    } from "@/api/system/exportPDF";

6、exportPDF.js中方法实现

import request from '@/utils/request'
    
    export function exportPDF() {
      //以文件流的方式返回数据
      return request({
        url: '/exportPdf/getPdf',
        method: 'post',
        responseType:'blob',
      })
    }

注意这里的

responseType:'blob',

7、完整vue代码

<template>
      <button type="button" style="margin-top: 20px;" @click="btnClick">请求文件流的方式导出PDF</button>
    </template>
    
    <script>
    import {
      exportPDF
    } from "@/api/system/exportPDF";
    export default {
      name: "ExportPDFWithServer",
      data() {
        return {
        
     };
      },
      mounted() {
    
      },
      methods: {
        btnClick(){   
         exportPDF().then((res)=>{
              //导出文件名
              var filename = '霸道的程序猿';
              //创建url
              let url = window.URL.createObjectURL(res)
              //创建a标签 并设置属性
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', filename + '.pdf')
              //添加a标签
              document.body.appendChild(link)
              //执行下载
              link.click();
              //释放url对象
              URL.revokeObjectURL(link.href);
              //释放a标签
              document.body.removeChild(link);
    
         });
        },
      },
    };
    </script>
    
    <style scoped>
    
    </style>

[SpringBoot_itext_PDF_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89475877
[fdc7bee005054edc89bfe690138c2ee7.gif]: https://img-blog.csdnimg.cn/fdc7bee005054edc89bfe690138c2ee7.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[Itext_PDF_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89476534