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>