SpringBoot集成itextpdf動態生成pdf並展示

背景

接上文SpringBoot集成markdown實現文檔管理，對於表格的支持markdown不是特別友好，同時內部文檔管理需要增加表格式api接口文檔的功能，所以決定采用結合數據庫存儲與動態生成pdf借助目錄結構展示的方式

表結構設計

目錄表

DROP TABLE IF EXISTS `knowledge_interfacecatalog`;
CREATE TABLE `knowledge_interfacecatalog` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `UnitGuid` varchar(50) DEFAULT NULL,
  `AddDate` datetime DEFAULT NULL,
  `CataName` varchar(100) DEFAULT NULL,
  `ParentCataGuid` varchar(50) DEFAULT NULL,
  `SortNum` int(11) DEFAULT NULL,
  `DocGuid` varchar(50) DEFAULT NULL,
  KEY `ID` (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4;

接口內容表

DROP TABLE IF EXISTS `knowledge_interfaceinfo`;
CREATE TABLE `knowledge_interfaceinfo` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `UnitGuid` varchar(50) DEFAULT NULL,
  `AddDate` datetime DEFAULT NULL,
  `InterfaceName` varchar(100) DEFAULT NULL,
  `Description` varchar(500) DEFAULT NULL,
  `Remark` varchar(500) DEFAULT NULL,
  `ParamJson` varchar(2000) DEFAULT NULL,
  `ResponseJson` varchar(2000) DEFAULT NULL,
  `InterfaceAddress` varchar(500) DEFAULT NULL,
  `SortNum` int(11) DEFAULT NULL,
  `CataGuid` varchar(50) DEFAULT NULL,
  `DocGuid` varchar(50) DEFAULT NULL,
  KEY `ID` (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8mb4;

錄入界面

PDF生成

引用

        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itextpdf</artifactId>
            <version>5.4.3</version>
        </dependency>

        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext-asian</artifactId>
            <version>5.2.0</version>
        </dependency>

創建PDF

	Document document = new Document(PageSize.A2);
    PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(filePath));
  	document.addTitle(doc.getDocName());
    document.addAuthor("xxxxx");
    document.addCreationDate();
    document.addLanguage("中文");
    document.open();

設置自定義字體

    File fontFile = new File("font/msyh.ttf");
    BaseFont bf = BaseFont.createFont(fontFile.getAbsolutePath(), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
    Font fontChinese5 = new Font(bf,14);

添加章節與段落

 	//目錄的字體
   Font cataFont = new Font(bf, 24, Font.NORMAL, BaseColor.BLACK);
   // 接口的字體
   Font interFont = new Font(bf, 20, Font.NORMAL, BaseColor.BLACK);     
   for(int i=1;i<=10;i++){
		Chapter chapter = new Chapter(new Paragraph("目錄", cataFont),i);
        for(int j=1;j<=5;j++){
            Section section = chapter.addSection(new Paragraph("接口", interFont));
        }
        document.add(chapter);
    }
	document.close();

添加表格

  PdfPTable table = new PdfPTable(3);//生成一個3列的表格
  //表格垂直居中
  table.setHorizontalAlignment(Element.ALIGN_CENTER);
  table.setTotalWidth(800f);
  float[] widths = new float[] { 150f,325f,325f };
  table.setWidths(widths);
  PdfPCell cell;
  cell = new PdfPCell(new Paragraph("接口地址",fontChinese5));
  table.addCell(cell);
   cell = new PdfPCell(new Paragraph(interfaceInfoDO.getInterfaceAddress(),fontChinese5));
  cell.setColspan(2);
  table.addCell(cell);

制表符替換

在pdf生成過程中\t制表符無效導致樣式變動，需要進行編碼替換replace("\t","\u00a0\u00a0\u00a0\u00a0")

PDF展示

這里選擇的是pdf.js進行展示，引用相關文件，地址欄出入file代表url地址即可，因為用於接口文檔展示，所以我需要默認進入就是目錄模式，所以需要對頁面進行相關js處理

<script type="text/javascript">
    var interval = setInterval('loadPdf()', 1000);

    function loadPdf() {
        if (PDFViewerApplication.pdfDocument == null) {
            console.info('Loading...');
        } else {
            clearInterval(interval);
            console.info('Load Success...');
            var sidebarToggle =   $("#sidebarToggle");
            var viewOutline =   $("#viewOutline");
            if(!sidebarToggle.hasClass("toggled")){
              sidebarToggle.click();
            }
            if(!viewOutline.hasClass("toggled")){
              viewOutline.click();
            }
        }
    }
</script>

展示效果