利用Tornado搭建文档预览系统

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

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

准备工作

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

项目代码

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

python -m http.server 8081

或者:

python -m SimpleHTTPServer 8081

接着介绍HTML文件，index.html是首页代码，主要实现文件上传功能，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文件上传</title>
</head>
<body><div align="center"><br><br><h1>文件上传</h1><form action='file' enctype="multipart/form-data" method='post'><div class="am-form-group am-form-file"><input id="doc-form-file" type="file" name="file" multiple></div><div id="file-list"></div><p><button type="submit" class="am-btn am-btn-default">提交</button></p></form></div></body>
</html>

页面如下（有点儿过于简单，还好本项目是注重文档预览功能）：
文件上传页面
markdown.html主要用于展示Markdown文件中的内容，代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Markdown文件展示</title><script src="https://cdn.bootcss.com/showdown/1.9.0/showdown.min.js"></script><script>function convert(){var converter = new showdown.Converter();var text = "{{ md_content }}";var html = converter.makeHtml(text.replace(/newline/g, "\n"));document.getElementById("result").innerHTML = html;}</script>
</head><body onload="convert()">
<div id="result" ></div></body>
</html>

注意，我们在head部分引用了showdown.js的CDN地址，这样就不用下载该项目文件了。
最后是后端部分，采用Python的Tornado模块实现。tornado_file_receiver.py主要用于文档的上传和保存，并展示文档内容，完整代码如下：

# -*- coding: utf-8 -*-
import os
import logging
import traceback
import tornado.ioloop
import tornado.web
from tornado import optionsfrom parse_file import *# 文档上传与解析
class UploadFileHandler(tornado.web.RequestHandler):# get函数def get(self):self.render('upload.html')def post(self):# 文件的存放路径upload_path = os.path.join(os.path.dirname(__file__), 'pdfjs/web/files')# 提取表单中‘name’为‘file’的文件元数据# 暂时只支持单文档的上传file_meta = self.request.files['file'][0]filename = file_meta['filename']# 保存文件with open(os.path.join(upload_path, filename), 'wb') as up:up.write(file_meta['body'])text = file_meta["body"]# 解析文件的内容mtype = file_meta["content_type"]logging.info('POST "%s" "%s" %d bytes', filename, mtype, len(text))if mtype in ["text/x-python", "text/x-python-script"]:self.write(parse_python(str(text, encoding="utf-8")))elif mtype in ["text/plain", "text/csv"]:self.write(parse_text_plain(str(text, encoding="utf-8")))elif mtype == "text/html":self.write(str(text, encoding="utf-8"))elif mtype.startswith("image"):self.write(parse_image(mtype, text))elif mtype == "application/json":self.write(parse_application_json(str(text, encoding="utf-8")))elif mtype == "application/pdf":self.redirect("http://127.0.0.1:8081/web/viewer.html?file=files/%s" % filename)elif mtype == "application/octet-stream" and filename.endswith(".md"):self.render("markdown.html", md_content=r"%s" % str(text, encoding="utf-8").replace("\n", "newline"))else:   # 其余文件格式try:self.write(str(text, encoding="utf-8").replace("\n", "<br>"))except Exception:logging.error(traceback.format_exc())self.write('<font color=red>系统不支持的文件解析格式！</font>')def make_app():return tornado.web.Application([(r"/file", UploadFileHandler)],template_path=os.path.join(os.path.dirname(__file__), "templates"))  # 模板路径if __name__ == "__main__":# Tornado configures logging.options.parse_command_line()app = make_app()app.listen(8888)tornado.ioloop.IOLoop.current().start()

parse_file.py用于解析各种格式的文档，并返回HTML展示的格式，完整代码如下：

# -*- coding: utf-8 -*-
# author: Jclian91
# place: Pudong Shanghai
# time: 2020/6/5 1:05 下午
# filename: parse_file.py
# 用于解析各种文件类型的数据
import json
import base64
import logging
import traceback
from json import JSONDecodeError# 解析text/plain或者text/csv文件格式
def parse_text_plain(text):return "<html><head></head><body>%s</body></html>" % text.replace("\n", "<br>")# 解析application/json文件格式
def parse_application_json(text):try:data_dict = json.loads(text)return json.dumps(data_dict, ensure_ascii=False, indent=2).replace("\n", "<br>").replace(" ", "&nbsp;")except JSONDecodeError:try:data_list = [json.loads(_) for _ in text.split("\n") if _]return json.dumps(data_list, ensure_ascii=False, indent=2).replace("\n", "<br>").replace(" ", "&nbsp;")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 '<html><head></head><body><img src="data:%s;base64,%s"></body></html>' % \(mtype, str(base64.b64encode(text), "utf-8"))# 解析Python文件
def parse_python(text):# indent和换行text = text.replace("\n", "<br>").replace(" ", "&nbsp;").replace("\t", "&nbsp;" * 4)# 关键字配色color_list = ["gray", "red", "green", "blue", "orange", "purple", "pink", "brown", "wheat", "seagreen", "orchid", "olive"]key_words = ["self", "from", "import", "def", ":", "return", "open", "class", "try", "except", '"', "print"]for word, color in zip(key_words, color_list):text = text.replace(word, '<font color=%s>%s</font>' % (color, word))colors = ["peru"] * 7punctuations = list("[](){}#")for punctuation, color in zip(punctuations, colors):text = text.replace(punctuation, '<font color=%s>%s</font>' % (color, punctuation))html = "<html><head></head><body>%s</body></html>" % textreturn html

实现方式

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

text/html: 如html文件等

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

self.write(str(text, encoding="utf-8"))

其中，str(text, encoding="utf-8")是将bytes字符串转化为UTF-8编码的字符串。

text/plain: txt/log文件等

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

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

text/csv: csv文件

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

application/json: json文件

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

# 解析application/json文件格式
def parse_application_json(text):try:data_dict = json.loads(text)return json.dumps(data_dict, ensure_ascii=False, indent=2).replace("\n", "<br>").replace(" ", "&nbsp;")except JSONDecodeError:try:data_list = [json.loads(_) for _ in text.split("\n") if _]return json.dumps(data_list, ensure_ascii=False, indent=2).replace("\n", "<br>").replace(" ", "&nbsp;")except JSONDecodeError:logging.error(traceback.format_exc())return "JSON文件格式解析错误"except Exception as err:logging.error(traceback.format_exc())return "未知错误: %s" % err

笔者相信一定有json文件更好的前端展示方式，这里没有采用专门处理json的JS框架，这以后作为后续的改进措施。

application/pdf: pdf文件

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

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

text/x-python: Python脚本文件

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

# 解析Python文件
def parse_python(text):# indent和换行text = text.replace("\n", "<br>").replace(" ", "&nbsp;").replace("\t", "&nbsp;" * 4)# 关键字配色color_list = ["gray", "red", "green", "blue", "orange", "purple", "pink", "brown", "wheat", "seagreen", "orchid", "olive"]key_words = ["self", "from", "import", "def", ":", "return", "open", "class", "try", "except", '"', "print"]for word, color in zip(key_words, color_list):text = text.replace(word, '<font color=%s>%s</font>' % (color, word))colors = ["peru"] * 7punctuations = list("[](){}#")for punctuation, color in zip(punctuations, colors):text = text.replace(punctuation, '<font color=%s>%s</font>' % (color, punctuation))html = "<html><head></head><body>%s</body></html>" % textreturn html

根据笔者的了解，其实有更好的Python脚本内容的预览方式，可以借助handout模块实现，这点笔者将会在后续加上。

image/*: 各种图片文件，比如jpg, png等

图片文件在HTML上的展示有很多中，笔者采用的方式为：

<img src="data:image/png;base64,ABKAMNDKSJFHVCJSNVOIEJHVUEHVUV==">

就是对图片读取后的字符串进行base64编码即可，因此实现代码如下（parse_file.py中的代码）：

import base64
# 解析image/*文件格式
def parse_image(mtype, text):return '<html><head></head><body><img src="data:%s;base64,%s"></body></html>' % \(mtype, str(base64.b64encode(text), "utf-8"))

markdown文件

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

        elif mtype == "application/octet-stream" and filename.endswith(".md"):self.render("markdown.html", md_content=r"%s" % str(text, encoding="utf-8").replace("\n", "newline"))

接着在markdown.html中的JS部分把Python读取的markdown中的换行符\n转化为newline，代码如下：

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

效果demo

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

text/html: 如html文件等

上传文件为reponse.html，预览效果如下：

html文件预览示例

text/plain: txt/log文件等

上传文件为info.log，预览效果如下：

info.log文件预览

text/csv: csv文件

上传文件为iris.csv，预览效果如下：

iris.csv文件预览

application/json: json文件

上传文件为test1.json，预览效果如下：

test1.json文件预览

application/pdf: pdf文件

上传文件为，预览效果如下：
PDF文档预览

text/x-python: Python脚本文件

上传文件为test.py，预览效果如下：
Python脚本预览

image/*: 各种图片文件，比如jpg, png等

上传图片为ffe3d40029eae71ccf8587e5dc21d58d.jpg，预览效果如下：
jpg图片预览

markdown文件

上传文件为Scrapy爬取动态网页.md，预览效果如下：

markdown文件预览

文件上传记录

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

文件上传记录
上传文件

总结

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

参考文档

PDF.js官方网址：http://mozilla.github.io/pdf.js/
showdown.js官方网址：https://github.com/showdownjs/showdown
让你的站点也支持Markdown——showdown.js使用教程： https://www.jianshu.com/p/747d6f8dddb0

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

No mapping for GET /WEB-INF/pages/index.jsp
springboot+jsp，总是访问不了首页浏览器报白页错误，按照以下步骤检查一下springboot访问jsp页面出现404；如果所有代码配置都是正确的，后台报错“No mapping for GET /WEB-INF/pages/index.jsp”,就修改下项目配置springboot项目jsp总是404....
2024/4/29 1:39:53
D 数列统计（组合数学，一种类杨辉三角）
题目传送门题意：找出长度为l，以x结尾的不下降子序列的个数。思路：我们发现长度为n并且以x结尾的数列的个数为长度为n-1，结尾为（1,2,3,…,x-1,x）的数列转化而来，我们打表发现有这样的规律：然后对比组合数的表，就会发现同一列在组合数中也会出现，然后对比发现，就是…...
2024/4/15 5:18:23
通配符匹配
一、前言问题来源LeetCode 44，难度：困难问题链接：https://leetcode-cn.com/problems/wildcard-matching二、题目给定一个字符串 (s) 和一个字符模式 (p) ，实现一个支持 ? 和 * 的通配符匹配。? 可以匹配任何单个字符。 * 可以匹配任意字符串（包括空字符串）。两个字符串…...
2024/4/19 16:03:53
MySQL技术内幕-InnoDB存储引擎-第六章、锁
文章目录锁1、什么是锁？2、lock和latchlatch(mutex互斥锁、rwlock读写锁)lock3、InnoDB存储引擎中的锁1、锁的类型锁最大程度利用并发确保每个用户能一致的读和修改数据1、什么是锁？锁用于管理对共享资源的并发访问。InnoDB支持行锁 InnoDB其他多个地方也使用了锁，比如操…...
2024/4/24 11:08:13
广度优先搜索_BFS
广度优先搜索算法（英语：Breadth-First Search，缩写为BFS），又译作宽度优先搜索，或横向优先搜索，是一种图形搜索算法。简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。 BFS是一种盲目搜索法，目的是系统地展开并检查图中的所…...
2024/4/24 11:08:11
微积分复习
复习用书：《同济高等数学》第五版第一章函数与极限集合：具有某种特定性质的事物的总统，其中的元素简称元常用集合：全体正整数N, 全体整数Z，全体有理数Q，全体实数R 领域：以点a为中心的任何开区间称为a的邻域，记为U(a) 基本初等函数：包括幂函数，指数函数，对数函数…...
2024/4/24 11:08:09
使用Prometheus监控API
写在最前面我心里也打鼓，是不是应该把这个文章写出来，因为这个项目里面的代码不能拿来就用，需要做修改（其实后端API监控本来就和业务相关，应该没有一个成品可以做到对每一个业务的API都能监控).其次文章里面涉及的知识点比较多，Prometheus,Prometheus-Operator,K8S,Pytho…...
2024/4/24 11:08:15
git clone分支到本地
一般如果不指定分支，克隆master到本地： git clone [仓库URL]如果需要克隆指定分支到本地： git clone -b [分支名] [仓库URL]示例现在我们需要克隆仓库https://github.com/openai/baselines的分支，现在网页上检查是否存在tf2分支，存在则直接克隆到本地： git clone -b tf2…...
2024/4/24 11:08:08
MySQL 重复数据的删除小示例
在平时的学习或者工作中有时我们难免会遇到重复的数据，若想删除某些数据，保留想保留的，那我们该如何去做呢？下面是一个删除 id 小的，保留 id 大的那条数据的小示例1、创建我们的测试表-- 创建测试表 drop table if exists dina_test_table; create table dina_test_table …...
2024/4/24 11:08:06
【力扣】450：删除二叉搜索树中的节点 | BST 经典
题目描述给定一个二叉搜索树的根节点 root 和一个值 key，删除二叉搜索树中的 key 对应的节点，并保证二叉搜索树的性质不变。返回二叉搜索树（有可能被更新）的根节点的引用。一般来说，删除节点可分为两个步骤：首先找到需要删除的节点；如果找到了，删除它。说明：要求…...
2024/4/24 11:08:12
面向对象03：回顾方法的调用
package com.oop.demo01;public class Demo02 {public static void main(String[] args) {//静态方法 staticStudent.say1();//非静态方法Student student = new Student();student.say2();}public void a1(){b1();}public void b1(){a1();}public static void a2(){b2();}publ…...
2024/4/26 1:15:49
集成RTMP推流源码
一、RTMPDump源码地址和Git地址（RTMPDump版本是2.4） RTMPDump源码地址：http://rtmpdump.mplayerhq.hu/ Git地址git clone git://git.ffmpeg.org/rtmpdump二、将已经下载好的rtmpdump中的librtmp添加到工程中去三、在CMakeLists.txt文件中把librtmp中的.c文件添加进去 cmake…...
2024/4/24 11:08:03
最全js数组方法
数组相关方法一、修改器方法下面的这些方法会改变调用它们的对象自身的值： pop 删除并返回数组的最后一个元素。参数：无返回值：数组的最后一个元素var arr = [张三, 李四, 王五]console.log(arr.pop()) // 王五push 向数组的末尾添加一个或多个元素，并返回新的长度。参…...
2024/4/24 11:08:09
模型融合概述
模型融合概述...
2024/4/24 11:08:04
面向对象04：类与对象的创建
类和对象的关系类是一种抽象的数据类型，它是对某一类事物先整体描述/定义，但是并不能代表某一个具体的事物。动物、植物、手机、电脑… Person类、Pet类、Car类等，这些类都是用来描述/定义某一类具体的事物应该具备的特点和行为对象是抽象概念的具体实例张三就是人的一个具体…...
2024/4/29 12:48:23
Echarts常见问题之grid说明x，x2，y，y2和x轴间隔显示，y轴高至顶部
背景：在使用echarts过程中，我们经常会直接使用UI写好的样式进行嵌套，但是有些地方需要微调1.grid说明有时候UI给我们的demo样例里有x,x2,y,y2，没用过echarts的人会比较懵逼，有了下面这个图就嗯嗯了。2.x轴数据间隔显示这时问题出现在x轴的数组里数据长短不一致，可以通过以…...
2024/4/24 11:08:06
我的shell记录
我的shell记录 ##!/bin/bash # addJar.sh #在已有的jar包中添加新的依赖jar包 path=BOOT-INF/lib jarName=$1if [ "$1" = "" ]; thenecho -e "未输入替换包名，程序退出!!!"exit 1 ficd bak rm -rf * cp ../*springboot-1.0.0-SNAPSHOT.jar ./ f…...
2024/4/24 11:08:01
异常和错误处理简析（一）
一、错误级别 1.1.PHP提示错误级别（当我们脚本出错时候，提示的错误级别） //PHP报错提示的那些错误级别（1）Deprecated 级别：不推荐的场景：一般是使用了过时的函数或语法导致的错误影响：不影响PHP流程（2）Notice 级别：通知级别错误场景：语法存在不当的地方影…...
2024/4/24 11:08:04
pip install特别慢
pip install tensorflow特别慢，每分钟5k左右。解决方法，使用该方法解决了: https://www.cnblogs.com/mosson/p/7379854.html...
2024/4/15 5:18:34
查询连续日期列表
1：mysql查询连续一个周的日期列表 SELECT DATE_SUB(CURDATE(),INTERVAL 7 DAY) day1 UNION SELECT DATE_SUB(CURDATE(),INTERVAL 6 DAY) day1 UNION SELECT DATE_SUB(CURDATE(),INTERVAL 5 DAY) day1 UNION SELECT DATE_SUB(CURDATE(),INTERVAL 4 DAY) day1 UNION SELECT DATE…...
2024/4/15 5:18:32

利用Tornado搭建文档预览系统

准备工作

项目代码

实现方式

text/html: 如html文件等

text/plain: txt/log文件等

text/csv: csv文件

application/json: json文件

application/pdf: pdf文件

text/x-python: Python脚本文件

image/*: 各种图片文件，比如jpg, png等

markdown文件

效果demo

text/html: 如html文件等

text/plain: txt/log文件等

text/csv: csv文件

application/json: json文件

application/pdf: pdf文件

text/x-python: Python脚本文件

image/*: 各种图片文件，比如jpg, png等

markdown文件

文件上传记录

总结

参考文档

相关文章

最新文章