linux预览md文件_利用Tornado搭建文档预览系统

在平时的工作或学习中&＃xff0c;我们经常会接触不同格式的文档类型&＃xff0c;比如txt&＃xff0c;log&＃xff0c;Offices文档&＃xff0c;编程代码脚本&＃xff0c;图片&＃xff0c;视频等。本文将会介绍笔者的一个朴素想法&＃xff0c;即把不同格式的文档都放在同一个平台中进行预览&＃xff0c;这样既方便查看常见文档&＃xff0c;又能提升工作和学习效率。本项目的工程结构如下&＃xff1a;

项目结构

本项目现在已支持8种文档格式的格式&＃xff0c;分别为&＃xff1a;

• text/html: 如html文件等;
• text/plain: 如txt/log文件等;
• text/csv: csv文件;
• application/json: json文件;
• application/pdf: pdf文件;
• text/x-python: Python脚本文件;
• image/*: 各种图片文件&＃xff0c;比如jpg, png等;
• markdown文件

准备工作

首先&＃xff0c;我们需要下载前端的PDF预览JS框架PDF.js&＃xff0c;它是一个网页端的PDF文件解析和预览框架&＃xff0c;下载网址为&＃xff1a;http://mozilla.github.io/pdf.js/ 。接着&＃xff0c;本项目还用到了showdown.js&＃xff0c;该JS框架用于渲染Markdown文档。用Python做后端&＃xff0c;tornado为web框架&＃xff0c;笔者使用的版本为5.1.1。

项目代码

我们下载PDF.js项目代码&＃xff0c;并在/pdfjs/web目录下新建files文件夹&＃xff0c;用于存放上传的文件。为了能够用PDF.js实现PDF文件预览&＃xff0c;需要切换至pdfjs文件夹&＃xff0c;运行搭建文件服务器命令:

python -m http.server 8081或者:

python -m SimpleHTTPServer 8081接着介绍HTML文件&＃xff0c;index.html是首页代码&＃xff0c;主要实现文件上传功能&＃xff0c;代码如下&＃xff1a;

文件上传

页面如下(有点儿过于简单&＃xff0c;还好本项目是注重文档预览功能)&＃xff1a;

文件上传页面

markdown.html主要用于展示Markdown文件中的内容&＃xff0c;代码如下&＃xff1a;

Markdown文件展示 function convert(){ var converter &＃61; new showdown.Converter(); var text &＃61; "{{ md_content }}"; var html &＃61; converter.makeHtml(text.replace(/newline/g, "\n")); document.getElementById("result").innerHTML &＃61; html; }注意&＃xff0c;我们在head部分引用了showdown.js的CDN地址&＃xff0c;这样就不用下载该项目文件了。最后是后端部分&＃xff0c;采用Python的Tornado模块实现。tornado_file_receiver.py主要用于文档的上传和保存&＃xff0c;并展示文档内容&＃xff0c;完整代码如下&＃xff1a;

# -*- coding: utf-8 -*-import osimport loggingimport tracebackimport tornado.ioloopimport tornado.webfrom tornado import optionsfrom parse_file import *# 文档上传与解析class UploadFileHandler(tornado.web.RequestHandler): # get函数 def get(self): self.render(&＃39;upload.html&＃39;) def post(self): # 文件的存放路径 upload_path &＃61; os.path.join(os.path.dirname(__file__), &＃39;pdfjs/web/files&＃39;) # 提取表单中‘name’为‘file’的文件元数据 # 暂时只支持单文档的上传 file_meta &＃61; self.request.files[&＃39;file&＃39;][0] filename &＃61; file_meta[&＃39;filename&＃39;] # 保存文件 with open(os.path.join(upload_path, filename), &＃39;wb&＃39;) as up: up.write(file_meta[&＃39;body&＃39;]) text &＃61; file_meta["body"] # 解析文件的内容 mtype &＃61; file_meta["content_type"] logging.info(&＃39;POST "%s" "%s" %d bytes&＃39;, filename, mtype, len(text)) if mtype in ["text/x-python", "text/x-python-script"]: self.write(parse_python(str(text, encoding&＃61;"utf-8"))) elif mtype in ["text/plain", "text/csv"]: self.write(parse_text_plain(str(text, encoding&＃61;"utf-8"))) elif mtype &＃61;&＃61; "text/html": self.write(str(text, encoding&＃61;"utf-8")) elif mtype.startswith("image"): self.write(parse_image(mtype, text)) elif mtype &＃61;&＃61; "application/json": self.write(parse_application_json(str(text, encoding&＃61;"utf-8"))) elif mtype &＃61;&＃61; "application/pdf": self.redirect("http://127.0.0.1:8081/web/viewer.html?file&＃61;files/%s" % filename) elif mtype &＃61;&＃61; "application/octet-stream" and filename.endswith(".md"): self.render("markdown.html", md_content&＃61;r"%s" % str(text, encoding&＃61;"utf-8").replace("\n", "newline")) else: # 其余文件格式 try: self.write(str(text, encoding&＃61;"utf-8").replace("\n", "
")) except Exception: logging.error(traceback.format_exc()) self.write(&＃39;&＃39;)def make_app(): return tornado.web.Application([(r"/file", UploadFileHandler)], template_path&＃61;os.path.join(os.path.dirname(__file__), "templates")) # 模板路径if __name__ &＃61;&＃61; "__main__": # Tornado configures logging. options.parse_command_line() app &＃61; make_app() app.listen(8888) tornado.ioloop.IOLoop.current().start()parse_file.py用于解析各种格式的文档&＃xff0c;并返回HTML展示的格式&＃xff0c;完整代码如下&＃xff1a;

# -*- coding: utf-8 -*-# author: Jclian91# place: Pudong Shanghai# time: 2020/6/5 1:05 下午# filename: parse_file.py# 用于解析各种文件类型的数据import jsonimport base64import loggingimport tracebackfrom json import JSONDecodeError# 解析text/plain或者text/csv文件格式def parse_text_plain(text): return "%s" % text.replace("\n", "
")# 解析application/json文件格式def parse_application_json(text): try: data_dict &＃61; json.loads(text) return json.dumps(data_dict, ensure_ascii&＃61;False, indent&＃61;2).replace("\n", "
").replace(" ", " ") except JSONDecodeError: try: data_list &＃61; [json.loads(_) for _ in text.split("\n") if _] return json.dumps(data_list, ensure_ascii&＃61;False, indent&＃61;2).replace("\n", "
").replace(" ", " ") except JSONDecodeError: logging.error(traceback.format_exc()) return "JSON文件格式解析错误" except Exception as err: logging.error(traceback.format_exc()) return "未知错误: %s" % err# 解析image/*文件格式def parse_image(mtype, text): return &＃39;&＃39; % \ (mtype, str(base64.b64encode(text), "utf-8"))# 解析Python文件def parse_python(text): # indent和换行 text &＃61; text.replace("\n", "
").replace(" ", " ").replace("\t", " " * 4) # 关键字配色 color_list &＃61; ["gray", "red", "green", "blue", "orange", "purple", "pink", "brown", "wheat", "seagreen", "orchid", "olive"] key_words &＃61; ["self", "from", "import", "def", ":", "return", "open", "class", "try", "except", &＃39;"&＃39;, "print"] for word, color in zip(key_words, color_list): text &＃61; text.replace(word, &＃39;&＃39; % (color, word)) colors &＃61; ["peru"] * 7 punctuations &＃61; list("[](){}#") for punctuation, color in zip(punctuations, colors): text &＃61; text.replace(punctuation, &＃39;&＃39; % (color, punctuation)) html &＃61; "%s" % text return html

实现方式

下面将进一步介绍各种格式实现预览的机制。

text/html: 如html文件等

html文件的MIMETYPE为text/html&＃xff0c;由于本项目采用HTML展示&＃xff0c;因此对于text/html的文档&＃xff0c;直接返回其内容就可以了。从Tornado的代码中我们可以看出&＃xff0c;filename变量为文档名称&＃xff0c;text为文档内容&＃xff0c;bytes字符串。在前端展示的时候&＃xff0c;我们返回其文档内容&＃xff1a;

self.write(str(text, encoding&＃61;"utf-8"))其中&＃xff0c;str(text, encoding&＃61;"utf-8")是将bytes字符串转化为UTF-8编码的字符串。

text/plain: txt/log文件等

txt/log等文件的MIMETYPE为text/plain&＃xff0c;其与HTML文档的不同之处在于&＃xff0c;如果需要前端展示&＃xff0c;需要在返回的字符中添加HTML代码&＃xff0c;如下(parse_file.py中的代码)&＃xff1a;

# 解析text/plain或者text/csv文件格式def parse_text_plain(text): return "%s" % text.replace("\n","
")

text/csv: csv文件

csv格式文件的MIMETYPE为text/csv&＃xff0c;其预览的方式与txt/log等格式的文档一致。但csv是逗号分隔文件&＃xff0c;数据格式是表格形式&＃xff0c;因此在前端展示上应该有更好的效果。关于这一格式的文档&＃xff0c;其前端预览的更好方式可以参考文章&＃xff1a;利用tornado实现表格文件预览。

application/json: json文件

关于json文件的预览&＃xff0c;笔者更关注的是json文件的读取。这里处理两种情况&＃xff0c;一种是整个json文件就是json字符串&＃xff0c;另一种情况是json文件的每一行都是json字符串。在前端展示的时候&＃xff0c;采用json.dumps中的indent参数实现缩进&＃xff0c;并转化为html中的空格&＃xff0c;实现方式如下(parse_file.py中的代码)&＃xff1a;

# 解析application/json文件格式def parse_application_json(text): try: data_dict &＃61; json.loads(text) return json.dumps(data_dict, ensure_ascii&＃61;False, indent&＃61;2).replace("\n", "
").replace(" ", " ") except JSONDecodeError: try: data_list &＃61; [json.loads(_) for _ in text.split("\n") if _] return json.dumps(data_list, ensure_ascii&＃61;False, indent&＃61;2).replace("\n", "
").replace(" ", " ") except JSONDecodeError: logging.error(traceback.format_exc()) return "JSON文件格式解析错误" except Exception as err: logging.error(traceback.format_exc()) return "未知错误: %s" % err笔者相信一定有json文件更好的前端展示方式&＃xff0c;这里没有采用专门处理json的JS框架&＃xff0c;这以后作为后续的改进措施。

application/pdf: pdf文件

PDF文档的展示略显复杂&＃xff0c;本项目借助了PDF.js的帮助&＃xff0c;我们需要它来搭建PDF预览服务&＃xff0c;这点在上面的项目代码部分的开头已经讲了。搭建好PDF预览服务后&＃xff0c;由于上传的文件都会进入pdfjs/web/files目录下&＃xff0c;因此PDF文档预览的网址为&＃xff1a;http://127.0.0.1:8081/web/viewer.html?file&＃61;files/pdf_name ,其中pdf_name为上传的PDF文档名称。有了这个PDF预览服务后&＃xff0c;我们展示PDF文档的代码就很简单了(tornado_file_receiver.py中的代码)&＃xff1a;

elif mtype &＃61;&＃61; "application/pdf": self.redirect("http://127.0.0.1:8081/web/viewer.html?file&＃61;files/%s" % filename)

text/x-python: Python脚本文件

Python脚本的处理方式并不复杂&＃xff0c;无非是在把Python文档转化为HTML文件格式的时候&＃xff0c;加入缩进、换行处理&＃xff0c;以及对特定的Python关键字进行配色&＃xff0c;因此代码如下(parse_file.py中的代码)&＃xff1a;

# 解析Python文件def parse_python(text): # indent和换行 text &＃61; text.replace("\n", "
").replace(" ", " ").replace("\t", " " * 4) # 关键字配色 color_list &＃61; ["gray", "red", "green", "blue", "orange", "purple", "pink", "brown", "wheat", "seagreen", "orchid", "olive"] key_words &＃61; ["self", "from", "import", "def", ":", "return", "open", "class", "try", "except", &＃39;"&＃39;, "print"] for word, color in zip(key_words, color_list): text &＃61; text.replace(word, &＃39;&＃39; % (color, word)) colors &＃61; ["peru"] * 7 punctuations &＃61; list("[](){}#") for punctuation, color in zip(punctuations, colors): text &＃61; text.replace(punctuation, &＃39;&＃39; % (color, punctuation)) html &＃61; "%s" % text return html根据笔者的了解&＃xff0c;其实有更好的Python脚本内容的预览方式&＃xff0c;可以借助handout模块实现&＃xff0c;这点笔者将会在后续加上。

image/*: 各种图片文件&＃xff0c;比如jpg, png等

图片文件在HTML上的展示有很多中&＃xff0c;笔者采用的方式为&＃xff1a;

就是对图片读取后的字符串进行base64编码即可&＃xff0c;因此实现代码如下(parse_file.py中的代码)&＃xff1a;

import base64# 解析image/*文件格式def parse_image(mtype, text): return &＃39;&＃39; % \ (mtype, str(base64.b64encode(text), "utf-8"))

markdown文件

markdown文件的预览稍显复杂&＃xff0c;借助showdown.js和不断的尝试探索&＃xff0c;由于markdown在读取后的换行符\n在转化为Javascript字符串时并不需要转义&＃xff0c;这是实现预览的难点。笔者的做法是把Python读取的markdown中的换行符\n转化为newline&＃xff0c;并在JS渲染的时候才把newline替换成\n&＃xff0c;这就解决了不需要转移的难题。具体的实现可以参考markdown.html&＃xff0c;现在Python后端代码中把Python读取的markdown中的换行符\n转化为newline&＃xff0c;代码如下&＃xff1a;

elif mtype &＃61;&＃61; "application/octet-stream" and filename.endswith(".md"): self.render("markdown.html", md_content&＃61;r"%s" % str(text, encoding&＃61;"utf-8").replace("\n", "newline"))接着在markdown.html中的JS部分把Python读取的markdown中的换行符\n转化为newline&＃xff0c;代码如下&＃xff1a;

function convert(){ var converter &＃61; new showdown.Converter(); var text &＃61; "{{ md_content }}"; var html &＃61; converter.makeHtml(text.replace(/newline/g, "\n")); document.getElementById("result").innerHTML &＃61; html; }

效果demo

下面将给出上述8中文档格式在本系统中的预览效果。

text/html: 如html文件等

上传文件为reponse.html&＃xff0c;预览效果如下&＃xff1a;

html文件预览示例

text/plain: txt/log文件等

上传文件为info.log&＃xff0c;预览效果如下&＃xff1a;

info.log文件预览

text/csv: csv文件

上传文件为iris.csv&＃xff0c;预览效果如下&＃xff1a;

iris.csv文件预览

application/json: json文件

上传文件为test1.json&＃xff0c;预览效果如下&＃xff1a;

test1.json文件预览

application/pdf: pdf文件

上传文件为&＃xff0c;预览效果如下&＃xff1a;

PDF文档预览

text/x-python: Python脚本文件

上传文件为test.py&＃xff0c;预览效果如下&＃xff1a;

Python脚本预览

image/*: 各种图片文件&＃xff0c;比如jpg, png等

上传图片为ffe3d40029eae71ccf8587e5dc21d58d.jpg&＃xff0c;预览效果如下&＃xff1a;

jpg图片预览

markdown文件

上传文件为Scrapy爬取动态网页.md&＃xff0c;预览效果如下&＃xff1a;

markdown文件预览

文件上传记录

为了证明上面的预览确实是笔者已经实现的&＃xff0c;而不是从哪搬来的图片&＃xff0c;特放上程序运行记录以及files目录下的文件&＃xff0c;如下&＃xff1a;

文件上传记录

上传文件

总结

本项目已经开源至Github&＃xff0c;网址为https://github.com/percent4/document_reviewer 本项目现在支持的文档格式还比较少&＃xff0c;后续可以增加更好文档格式的支持&＃xff0c;另外&＃xff0c;现在的文档格式的预览有些可以做得更好&＃xff0c;后续也会进行优化~感谢大家阅读&＃xff0c;希望读者多多批评指正~

参考文档

1. PDF.js官方网址&＃xff1a;http://mozilla.github.io/pdf.js/

2. showdown.js官方网址&＃xff1a;https://github.com/showdownjs/showdown

3. 让你的站点也支持Markdown——showdown.js使用教程&＃xff1a;https://www.jianshu.com/p/747d6f8dddb0

-END-

已有50万人
领取Python案例实战课

世界正在奖励坚持学习的人&＃xff01;