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

场景

SpringBoot加itext实现PDF导出：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89475877

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

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

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常用方法说明：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89476534

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>