【java markdown界面展示以及适配文件流接口】

markdown语言在界面展示实现过程

背景：

业务上各个流程模版扮演了不同的角色，都有各自的职责。但这些职责具体是干什么应该只有研发最清晰，此时对于广大用户来说很不友好。中间一旦遇到问题，很难知道找到负责的人处理。怎么增加使用体验以及研发想要传递给用户的信息就显得尤为重要。markdown就承担了这一桥梁。

过程：

思路1

前端通过showdawn组件，读取后端返回的markdown源码字符串解析展示。

问题1

通过测试，前端并不能直接通过showdawn组件解析。如下：

只有开头的被解析，后面预发没有任何效果。

解决办法1

增加html标签**br/**但是发现，虽然可以换行，但是换行后的语法仍然没有效果。

思路2

前端通过换行文本框存储markdown源码。增加换行解析。

问题2

通过前端测试，showdawn依然无法正确解析。

解决办法2

解析失败，但是showdawn组件可以通过接收文件流方式解析。

思路3

开发java outputStream流文件接口，将markdown源码以写入文件方式传递

问题3

1.第一个难点是HttpServletResponse，设置请求头，怎么设置，设置那些参数，又是什么类型？

2.先记一下，markdown< small>< /small>编辑器和showdawn不兼容，会失效，要使用html标签。

解决办法 3

1.response.reset() 是一个方法，用于在向响应对象写入新数据之前清除其内容。

**StandardCharsets.UTF_8.name()**是设置响应编码的方法，它将响应的字符编码设置为UTF-8。

application/octet-stream。这个属性告诉客户端以二进制流（bytes）的形式接收响应数据。此设置通常用于响应下载文件，因为下载文件的格式、大小和类型可能会因不同的文件而异。如果不设置Content-Type，浏览器可能会根据文件扩展名来猜测文件类型，但并不是所有浏览器都能正确猜测，因此建议明确设置Content-Type。

Content-Disposition属性的值，告诉浏览器如何处理响应体。attachment参数告诉浏览器将响应体作为附件下载，而不是在浏览器中显示。 filename参数指定下载的文件名，浏览器会使用该文件名来命名下载的文件，这里的文件名是“outputTest.md”。

这些条件准备好以后，创建OutputStream流，例：

toClient.flush() 是一个方法调用，它的作用是清空输出流（OutputStream）并强制将所有缓冲的输出数据发送到客户端。
toClient.close() 是一个方法调用，它的作用是关闭输出流（OutputStream）并释放与之相关的系统资源。
到此，文件流接口主体已经完成，接口要以GET请求。中间通用的逻辑需要根据业务实现。接口调用正常情况如下：
会自动下载一个文件，文件是md格式，存储的markdown源码

2.此时为了方便测试，文件流接口hardcode一个markdown源码字符串。前端调用接口后，顺利展示在界面上。但是字体与界面原有字体相差较大，非常影响美观。
字体大小：这里需要注意，网上很多地方都推荐< small>< /small>、< big>< /big>，很多编辑器以及组件是不兼容的，所以要使用< font size=1>< /font>，size一共有五种大小，从小到大一次是 1-5 。
颜色：也是< font color=Bule>< /font>，想要什么颜色就在color后填写颜色的英文名称，同样为了与界面颜色一致，可以根据控制台查看前端使用的色号，书写具体的值，例：color=#3c8dbc。
超链接：书写方式很简单英文的 []和()，但如果点击后，所在界面就会跳转，使用体验会减少，那么就需要使用 < base target=“_blank”> 标签，加在超链接的上一行即可跳转新的页面。

实现过程走到这里，已经完成了90%，接下来就需要把markdown源码存储下来，方便文件流接口读取。存储时，增加和查询接口也要适配。

思路4

当界面适配了可换行的文本框时，在调用接口存储时，前端对于换行进行了转义，传给后端参数是携带 \n的源码。

问题4

那么问题仿佛又回到了一开始出现的问题，怎么换行能支持 showdawn组件解析？

解决办法4

当出现这个问题时，有些许的不安，仿佛回到了原点。既然颜色、字体大小、超链接都能通过HTML标签解决，为什么换行不行呢。在编写完成markdown源码后，将换行转换成 < br/>，此时问题完美解决。

总结

实现过程一路磕磕绊绊，但每一次遇到阻碍，都是成长的过程。看似不多的代码却蕴涵着大量的知识点。很有意思，再次感谢我大哥。

注

本文中所有的HTML标签中<"this"xxx>都加了一个空格(this)，为了不被markdown文本解析掉。