vue 在页面中嵌入markdowm文档并展示

272 阅读1分钟

在页面中需要以html的形式展示markdown文档的内容。

1. 下载Typora,打开.md 文档

对文档内容进行格式等调整后,点击文件,选择 HTML 格式导出到自定义目录 (/public/html)

企业微信截图_17449438802953.png

2. 修改 .html 文件内容

如果文档中有图片和下载文件等,需要添加相关资源到对应目录,并调整 .html 中文件引入资源路径,使页面能正常展示。

企业微信截图_17449445802028.png

3. 页面展示

企业微信截图_17449441945037.png 企业微信截图_17449443244308.png 企业微信截图_17449626918080.png

4. 问题记录

线上测试时,出现过下载失败的情况。排查后发现可能是下载文件命名是中文导致,后续通过修改文件名并在a标签内添加外部方式打开后,问题修复。

企业微信截图_1744962090681.png

查找资料: 企业微信截图_a0adeaff-3783-4e97-b52a-184878509b21.png 企业微信截图_712e7dde-b7b5-41da-ae22-bdc9ea580929.png