富文本编辑器导出html静态页面和pdf格式文件

在这里记录的都是在项目开发中遇到的问题，都是自己查找网上资料，经过测试总结出来的，就是希望有同样需求的人可以少走弯路。

本人当前使用的是若依框架自带的富文本编辑器，附上相关图片，具体的代码可以查看若依框架源码。

用这款富文本编辑器导出的内容是一段只有html内容的字符串，类似以下的数据信息：

<h1 class=\"ql-align-center\">编辑器导出的内容</h1><p> <em> 富文本编辑器</em><span style=\"color: rgb(230, 0, 0);\">导出pdf格式文件</span>类似以下的数据</p>

以上数据只用来做示例。这样的数据缺少html文件的表头格式，所以我们在编辑器导出pdf格式

时要补全html文件格式。

首先是富文本编辑器导出pdf格式文件

增加相关pom依赖

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

<dependency>
<groupId>com.itextpdf.tool</groupId>
<artifactId>xmlworker</artifactId>
<version>5.5.13</version>
</dependency>

创建公共方法：

import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.pdf.PdfWriter;
import com.itextpdf.tool.xml.XMLWorkerFontProvider;
import com.itextpdf.tool.xml.XMLWorkerHelper;import java.io.*;
import java.nio.charset.Charset;public class PdfUtils {private static final String CONTENT = "<h1 class=\"ql-align-center\">编辑器导出的内容</h1><p> <em> 富文本编辑器</em><span style=\"color: rgb(230, 0, 0);\">导出pdf格式文件</span>类似以下的数据</p>";/*** 拼接CONTENT 使成为完整的html,\"font-family: SimSun;\"*/private static final String COMPLETE_CONTENT = "<html><head></head><body style=\"font-family: SimSun;\">" + CONTENT + "</body></html>";public static void main(String[] args) throws Exception {PdfUtils utils = new PdfUtils();String content = utils.content2Html();utils.html2Pdf("C:/Users/admin/Desktop/测试生成文档/pdf/" + "测试.pdf", content);}/*** html转换成pdf文件** @param htmlContent* @throws Exception*/protected void html2Pdf(String path, String htmlContent) throws Exception {htmlContent = htmlContent.replace("      ", "\u00A0\u00A0");File pdfFile = new File(path);//1 打开文件流Document document = new Document();FileOutputStream fos = new FileOutputStream(pdfFile);InputStream is = new ByteArrayInputStream(htmlContent.getBytes(Charset.forName("UTF-8")));InputStream cssIs = new ByteArrayInputStream(getCssFile());PdfWriter writer = null;try {writer = PdfWriter.getInstance(document, fos);//3. 设置字体XMLWorkerFontProvider fontProvider1 = new XMLWorkerFontProvider(XMLWorkerFontProvider.DONTLOOKFORFONTS);fontProvider1.register("C:/Windows/Fonts/simsun.ttc");//3 打开文档document.open();//4 html转为pdfXMLWorkerHelper.getInstance().parseXHtml(writer, document, is, cssIs, Charset.forName("UTF-8"), fontProvider1);} catch (DocumentException | IOException e) {throw new RuntimeException("转pdf失败罗~");} finally {if (null != writer) {writer.flush();}//5 关闭文档document.close();fos.close();cssIs.close();is.close();writer.close();}}/*** 获取html** @return*/protected String content2Html() {String content = COMPLETE_CONTENT;content = content.replace("<br>", "<br/>");return content;}/*** 获取样式文件** @return* @throws Exception*/protected static byte[] getCssFile() throws Exception {FileInputStream fileInputStream = new FileInputStream("ruoyi-common/src/main/resources/css/snow.css");ByteArrayOutputStream outStream = new ByteArrayOutputStream();byte[] buffer = new byte[1204];int len = 0;while ((len = fileInputStream.read(buffer)) != -1) {outStream.write(buffer, 0, len);}fileInputStream.close();return outStream.toByteArray();}
}

运行结果如下：

在首次运用中那个，需要确定是否存放了css文件和字体信息。我是直接将前端的css文件复制出来放在后端位置。

css文件将会影响到生成文本的格式。字体在系统里没有的话，需要自己网上下载，再放到字体库。同时手动的将编辑器输出的空格替换掉

htmlContent = htmlContent.replace(" ", "\u00A0\u00A0");

这样导出pdf格式文件就完成了。

其次是导出html静态页面

最终显示样式是

创建公共方法：

import java.io.FileOutputStream;
import java.io.PrintStream;public class wordUtils {public static void autoToHTML(String destFileName, String templateString) {//用于存储html字符串try {//打开文件PrintStream printStream = new PrintStream(new FileOutputStream(destFileName));//输入HTML文件内容templateString = templateString.replace("      ","\u00A0\u00A0");templateString =  "<html><head><link rel=\"stylesheet\" href=\"snow.css\" type=\"text/css\" /></head><body style=\"font-family: SimSun;\">" + templateString + "</body></html>";//将HTML文件内容写入文件中printStream.println(templateString);} catch (Exception e) {e.printStackTrace();}}public static void main(String[] args) {String html = "<h1 class=\"ql-align-center\">编辑器导出的内容</h1><p> <em> 富文本编辑器</em><span style=\"color: rgb(230, 0, 0);\">导出pdf格式文件</span>类似以下的数据</p>";String path ="C:/Users/admin/Desktop/测试生成文档/html/demo.html";autoToHTML(path,html);}
}
这块需要注意的是，css文件放置的位置和保存静态页面的位置是一致的，或者根据具体情况放置，但是要确保html文件可以读到配置文件信息。

以上就是富文本编辑器导出html静态页面和pdf格式文件的主要内容，这里没有测试图片格式和视频格式，同时中文首行缩进长度还需优化，读者有更好的建议欢迎补充。