場景

SpringBoot加itext實現(xiàn)PDF導(dǎo)出：

SpringBoot加itext實現(xiàn)PDF導(dǎo)出_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面實現(xiàn)導(dǎo)出pdf的基礎(chǔ)上，怎樣結(jié)合前端Vue發(fā)送請求實現(xiàn)導(dǎo)出pdf。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

1、搭建前后端分離的架構(gòu)

若依前后端分離版本地搭建開發(fā)環(huán)境并運行項目的教程：

若依前后端分離版手把手教你本地搭建環(huán)境并運行項目_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 {//設(shè)置響應(yīng)格式等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<>();//設(shè)置紙張規(guī)格為A4紙Rectangle rect = new Rectangle(PageSize.A4);//創(chuàng)建文檔實例Document doc=new Document(rect);//添加中文字體BaseFont bfChinese=BaseFont.createFont("STSong-Light", "UniGB-UCS2-H", BaseFont.NOT_EMBEDDED);//設(shè)置字體樣式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); //下劃線斜體//設(shè)置字體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);//設(shè)置要導(dǎo)出的pdf的標題String title = "霸道流氓氣質(zhì)";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);//設(shè)置行高p1.setLeading(0);//設(shè)置標題居中p1.setAlignment(Element.ALIGN_CENTER);//將段落添加到文檔上doc.add(p1);//設(shè)置一個空的段落，行高為18 什么內(nèi)容都不顯示Paragraph blankRow1 = new Paragraph(18f, " ", FontChinese11);doc.add(blankRow1);//新建表格 列數(shù)為2PdfPTable table1 = new PdfPTable(2);//給表格設(shè)置寬度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));//設(shè)置單元格邊框為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("當(dāng)前時間： "+new Date().toString(),boldFont));cell15.setBorder(0);cell16.setBorder(0);table3.addCell(cell15);table3.addCell(cell16);doc.add(table3);doc.close();}}

具體方法和布局可以參考itext官網(wǎng)或如下

Itext實現(xiàn)導(dǎo)出PDF常用方法說明：

Itext實現(xiàn)導(dǎo)出PDF常用方法說明_BADAO_LIUMANG_QIZHI的博客-CSDN博客

4、新建Vue頁面，頁面添加按鈕

<button type="button" style="margin-top: 20px;" @click="btnClick">請求文件流的方式導(dǎo)出PDF</button>

5、按鈕點擊事件

? methods: {btnClick(){???exportPDF().then((res)=>{//導(dǎo)出文件名var filename = '霸道的程序猿';//創(chuàng)建urllet url = window.URL.createObjectURL(res)//創(chuàng)建a標簽 并設(shè)置屬性let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', filename + '.pdf')//添加a標簽document.body.appendChild(link)//執(zhí)行下載link.click();//釋放url對象URL.revokeObjectURL(link.href);//釋放a標簽document.body.removeChild(link);});},},

點擊事件中調(diào)用了引入的方法exportPDF

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

6、exportPDF.js中方法實現(xiàn)

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

注意這里的

responseType:'blob',

7、完整vue代碼

<template><button type="button" style="margin-top: 20px;" @click="btnClick">請求文件流的方式導(dǎo)出PDF</button> </template><script> import {exportPDF } from "@/api/system/exportPDF"; export default {name: "ExportPDFWithServer",data() {return {};},mounted() {},methods: {btnClick(){???exportPDF().then((res)=>{//導(dǎo)出文件名var filename = '霸道的程序猿';//創(chuàng)建urllet url = window.URL.createObjectURL(res)//創(chuàng)建a標簽 并設(shè)置屬性let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', filename + '.pdf')//添加a標簽document.body.appendChild(link)//執(zhí)行下載link.click();//釋放url對象URL.revokeObjectURL(link.href);//釋放a標簽document.body.removeChild(link);});},}, }; </script><style scoped></style>

總結(jié)

以上是生活随笔為你收集整理的SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。