场景

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);//新建表格 列数为2PdfPTable 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));//设置单元格边框为0cell11.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 = '霸道的程序猿';//创建urllet url = window.URL.createObjectURL(res)//创建a标签 并设置属性let link = document.createElement('a')link.style.display = 'none'link.href = urllink.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 = '霸道的程序猿';//创建urllet url = window.URL.createObjectURL(res)//创建a标签 并设置属性let link = document.createElement('a')link.style.display = 'none'link.href = urllink.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+Vue+Itext实现前端请求文件流的方式下载PDF相关推荐

SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
flask vue 文件流的方式下载word
前端传递uuid,后端根据uuid找到对应的记录,把数据填充导word文档中,以文件流的方式传递给前端实现下载功能,这样后端就不用先保存再根据路径下载了这是重点,必须加,不然下载的文件是乱码 {re ...
react集成react-pdf获取文件流预览下载pdf，展示电子签章
1.下载依赖包代码如下(示例): npm install react-pdf 2.引入依赖包代码如下(示例): import { Document, Page } from 'react-pdf' ...
ASP.NET使用文件流的方式下载文件
//以字符流的形式下载文件 string filePath = "D://dome.doc"; FileStream fs = new FileSt ...
response以流的方式下载文件
response以流的方式下载文件 /*** 文件下载* @param worldName 获取前端传进来的文件名* @param response*/@GetMapping("/fileD ...
前端大文件上传和下载（分片上传）
前端大文件上传和下载(分片上传) 一.问题日常业务中难免出现前端需要向后端传输大型文件的情况,这时单次的请求不能满足传输大文件的需求,就需要用到分片上传业务需求为:用户可以上传小于20G的镜像文件 ...
JAVA 实现返回PDF文件流并进行下载
JAVA 实现返回PDF文件流并进行下载首先确保本地存放pdf 保证通过路径可以拿到文件我这边把pdf放在e盘下的目录 1.前台方法原生ajax 发送请求返回文件流进行下载 function d ...
java 看书浏览器官_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过url预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的header,注意这句,如果开启,默认浏览器会进行下载操作,如果注 ...
java 读取浏览器_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过URL预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的Header,注意这句,如果开启,默认浏览器会进行下载操作,如果注 ...

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

场景

实现

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

最新文章

热门文章