场景

SpringBoot加itext实现PDF导出：

SpringBoot加itext实现PDF导出_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

注：

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

实现

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

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

若依前后端分离版手把手教你本地搭建环境并运行项目_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博客

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>

原网址: 访问
创建于: 2023-08-08 16:43:58
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到