背景

接上文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>

展示效果