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

刊史生石

已于 2022-05-23 09:59:37 修改

阅读量4.2k

点赞数

文章标签： html 前端

于 2022-05-14 09:47:20 首次发布

本文链接：https://blog.csdn.net/nexttoparadise/article/details/124763728

版权

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

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

用这款富文本编辑器导出的内容是一段只有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转为pdf
            XMLWorkerHelper.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格式文件的主要内容，这里没有测试图片格式和视频格式，同时中文首行缩进长度还需优化，读者有更好的建议欢迎补充。

刊史生石

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器导出html静态页面和pdf格式文件

在这里记录的都是在项目开发中遇到的问题，都是自己查找网上资料，经过测试总结出来的，就是希望有同样需求的人可以少走弯路。本人当前使用的是若依框架自带的富文本编辑器，附上相关图片，具体的代码可以查看若依框架源码。用这款富文本编辑器导出的内容是一段只有html内容的字符串，类似以下的数据信息：<h1 class=\"ql-align-center\">编辑器导出的内容</h1><p> <em> 富文本编辑器</em><span
复制链接

扫一扫