1、效果图：

 

（具体一些细节和布局还需要调整） 

技术点：elementUI+WangEditor+SpringBoot+IText7+

2、pom：

<!-- pdf:start -->
  <properties>
    <maven.compiler.source>8</maven.compiler.source>
    <maven.compiler.target>8</maven.compiler.target>
    <itext.version>7.1.11</itext.version>
  </properties>
  <dependencies>
    <!-- itext7 -->
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>kernel</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>io</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>layout</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>forms</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>pdfa</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>pdftest</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>font-asian</artifactId>
      <version>${itext.version}</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>1.7.18</version>
    </dependency>

    <!--itext7 html转pdf用到的包-->
    <dependency>
      <groupId>com.itextpdf</groupId>
      <artifactId>html2pdf</artifactId>
      <version>3.0.0</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>2.1.6.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>RELEASE</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.20</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>RELEASE</version>
      <scope>test</scope>
    </dependency>
    <!-- hutool  -->
    <dependency>
      <groupId>cn.hutool</groupId>
      <artifactId>hutool-all</artifactId>
      <version>5.7.20</version>
    </dependency>

  </dependencies>

3、domain：

//接收数据对象
@Data
public class Person {

    private String editor;

    private String name;

    private String text;

    private String title;
}


//通用结果集返回对象
@Data
public class ResultObj {
    private Boolean success;

    private Integer code;

    private String message;

    private Map<String, Object> data = new HashMap<String, Object>();

    //把构造方法私有   不让别人new该类
    private ResultObj() {}
    //实现链式编程
    //R.ok().code().message().data();

    //成功静态方法
    public static ResultObj ok() {
        ResultObj r = new ResultObj();
        r.setSuccess(true);
        r.setCode(200);
        r.setMessage("成功");
        return r;
    }

    //失败静态方法
    public static ResultObj error() {
        ResultObj r = new ResultObj();
        r.setSuccess(false);
        r.setCode(300);
        r.setMessage("失败");
        return r;
    }

    public ResultObj success(Boolean success){
        this.setSuccess(success);
        return this;   //返回this  实现链式编程
    }
}

4、PdfUtils:

public static void convertToPdf(InputStream inputStream, String waterMark, String fontPath, OutputStream outputStream) throws IOException {
    public static void util(String html, String filepath) throws IOException {
        try (FileOutputStream outputStream = new FileOutputStream(filepath)) {
            ConverterProperties converterProperties = new ConverterProperties();
            FontProvider provider = new FontProvider();
            provider.addSystemFonts();
            converterProperties.setFontProvider(provider);
            HtmlConverter.convertToPdf(html,outputStream,converterProperties);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

5、controller:

@RestController("/test")
@CrossOrigin(origins = "*", maxAge = 3600)   //解决跨域问题
public class TestController {
    @Autowired
    private TestService testService;

    /**
     * 打印PDF
     *
     * @throws
     * @throws IOException
     */
    @PostMapping("/add")
    public ResultObj test(@RequestBody Person person) throws IOException {
        if (person.getName().length() > 5) {
            throw new RuntimeException("文件名过长");
        }
        testService.testMethod(person);
        return ResultObj.ok();
    }

    /**
     * 测试能否访问
     *
     * @return
     */
    @PostMapping("/insert")
    public String insert() {
        return "访问成功";
    }
}

6、service:

（一开始用的是itex直接画出段落，但发现处理不了富文本，于是先把所有的转化成html，然后在固定需要写入数据的地方拼接数据）

public class TestService {
    @Value("${server.pdfFilePath}")
    private String pdfFilePath; //读取配置路径

    public void testMethod(Person person) throws IOException {
        //模拟数据
        long start = Calendar.getInstance().getTimeInMillis();
        String name = person.getName();
        String filename =pdfFilePath + name +".pdf"; //路径+名称+后缀
        String title =person.getTitle();
        String editor =person.getEditor();
        //生成pdf  name：文件名 filename：绝对路径+文件名+后缀
        long end = Calendar.getInstance().getTimeInMillis();
        pdfUtil2(name, filename, title, editor);
        System.out.println("本次生成PDF时间为： "+(end-start)+"ms");
    };
    }
    public static void pdfUtil2(String name, String filename, String title,  String editor) throws IOException {
        //HTML转PDF(不能添加<!DOCTYPE html><html><head>等标签否则会报错)
        StringBuilder html = new StringBuilder();
        html.append("<div style=\"font-size: 1em; line-height: 0.0em;width: 49.58333em;height: " +
                "70.16666em;border-style: none;display: block;margin: 0em;\"><!-- <div style=\"position: relative;\"><object data=\"123_files/img_01.svg\" " +
                "type=\"image/svg+xml\" class=\"stl_04\" style=\"position:absolute; width:49.5833em; height:70.1667em;\"><embed src=\"123_files/img_01.svg\" " +
                "type=\"image/svg+xml\" /></object></div> --><div style=\"font-size:1em; transform:scale(1);\"><div style=\"position: relative; " +
                "width: 49.58333em; height: 7.016666em;\"><div style=\"left:20.7917em;top:4.2813em; position: absolute; white-space: nowrap;\">" +
                "<span style=\"font-weight:bold;font-size: 2em; color: #FF0000;line-height: 1em; letter-spacing: 0em;\">");
        //文件名称
        html.append(name);
        html.append("&nbsp;</span></div><div style=\"left:10.7917em;top:7.2813em; position: absolute;border:1px solid red;width: 57%; margin:auto;white-space: " +
                "nowrap;\"></div><div style=\"left:23.7525em;top:9.1276em; position: absolute; white-space: nowrap;\"><span style=\"line-height: 1em;\tfont-size" +
                ": 1.5em;color: #000000;letter-spacing: -0.038em;\">");
        //标题
        html.append(title);
        html.append("&nbsp;</span></div><div style=\"left:10.5em;top:11.8906em; position: absolute; white-space: nowrap;\"><span style=\"line-height: 1em;" +
                "letter-spacing: 0em;font-size: 1em;color: #000000;\">抬头： &nbsp;</span></div><div style=\"left:12.5em;top:14.224em; position: absolute; " +
                "white-space: nowrap;\"><span  style=\"letter-spacing: -0.038em;line-height: 1em;\tfont-size: 1em;color: #000000;\">");
        //富文本
        html.append(editor);
        html.append(" &nbsp;</span></div></div></div></div>");
        System.out.println(html);
        HtmlToPdfUtils.util(html.toString(),filename);
    }
}

7、前端代码：

（elementUI做的简单页面）如何从0到1创建参考前端模块化与工程化 | Vue-cli 与 Webpack 的使用_vue-cli和webpack的命令行_只是曾路过的博客-程序员宅基地

        富文本编辑器使用的是wangeditor

<template>
  <div id="app">
    <el-form :inline="true" :model="ruleForm">
      <el-form-item label="文件名称">
        <el-input v-model="ruleForm.name" placeholder="请输入文件名称"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-row>
        <el-col>
          <el-form-item label="正文">
            <div id="wangeditor">
              <div ref="editorElem"></div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
 
      <el-form-item>
        <el-button type="primary" @click="submitForm()">生成pdf</el-button>
        <el-button type="danger" @click="resetForm()">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
import E from "wangeditor"
export default {
  data() {
    return {
      editor: null,
      ruleForm: {
        editor: '',
        title: '',
        text: '',
        name: '',
      }
    }
  },
  methods: {
    resetForm() {
      this.editor.txt.clear()  //清空富文本的内容
      this.ruleForm.title = '';
      this.ruleForm.text = '';
      this.ruleForm.name = '';

    },
    submitForm() {
      this.ruleForm.editor = this.editor.txt.html();
      if(this.ruleForm.name.length==0||this.ruleForm.name.length>10){
        alert("请检查文件名称")
        return
      }
      if(this.ruleForm.title.length==0||this.ruleForm.title.length>10){
        alert("请检查文件标题")
        return
      }
      if(this.ruleForm.editor.length==0){
        alert("请检查文件正文内容")
        return
      }
      axios.post("http://localhost:8080/add",this.ruleForm).then(res => {
        console.log(res);
        alert("PDF已生成");
        this.resetForm();//清除数据
      }, err => {
        alert("PDF生成失败");
      })
    },

    add() {
      axios.post("http://localhost:8080/insert").then(res => {
        console.log(res);
      }, err => {
        console.log(res);
      })
    }
  },
  mounted() {
    this.add();
    //methods里创建调用、或是mounted里面直接生产
    this.editor = new E(this.$refs.editorElem);//获取组件并构造编辑器
    this.editor.create(); // 创建富文本实例
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>