Javascript 如何使用flask/jinja将word文档内容读入html
我是使用flask/jinja进行web开发的新手。我的word文件中有内容。我想将word文件内容(text3.docs)读入我的html文档(home.html)。home.html扩展自base.html。我尝试了下面的代码,但我得到了解码错误。请帮忙 项目结构: Home.htmlJavascript 如何使用flask/jinja将word文档内容读入html,javascript,python,html,flask,jinja2,Javascript,Python,Html,Flask,Jinja2,我是使用flask/jinja进行web开发的新手。我的word文件中有内容。我想将word文件内容(text3.docs)读入我的html文档(home.html)。home.html扩展自base.html。我尝试了下面的代码,但我得到了解码错误。请帮忙 项目结构: Home.html {% extends 'base.html'%} {% block title %}Home{% endblock %} {% block content%} <p>{{file}}
{% extends 'base.html'%}
{% block title %}Home{% endblock %}
{% block content%}
<p>{{file}}</p>
{% endblock%}
<!DOCTYPE html>
<html lang="english">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href={{url_for('static', filename='images/logo1.png')}}>
<title>{% block title%}{% endblock %}</title>
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
>
<!-- Our Custom CSS -->
<link rel="stylesheet" href={{url_for('static', filename='stylesheets/style.css')}}>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src={{url_for('static', filename='images/logo1.png')}} alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<form class="lg-flex">
<button type="button" href="/signin" class="btn btn-custom">Sign In</button>
<button type="button" class="btn btn-custom">Sign Up</button>
</form>
</nav>
</div>
{% block content %}{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
main.py
from flask import render_template, Blueprint
routes = Blueprint('routes', __name__)
f = open('Website/static/data/text3.docx', 'r', encoding="utf8")
file = f.read()
@routes.route('/')
def home():
return render_template('Home.html', file=file)
from Website import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)
style.css(可能不需要css文件,但我仍在下面提供以供参考)
Word文档不是html。您不能这样对待它们,而只是将它们的文件内容插入html页面。如果您只需要文本和大量文档,则需要模块
pythondocx
中的转换库look,请尝试apachetika(它有一个python包装器)。如果是少量文档,那么就有pythondocx库,允许您在较低级别访问文档内容。如果你能从一开始就避免将文档放在docx中,我会这样做。最后,DOCX文件是XML文件的集合(可能过于简单!),因此您可以将DOCX文件的document.XML插入到您的网页中,但我怀疑这是您想要的!我相信word可以导出为HTML-可能仍然不是您想要的:)
#customNavbar .navbar-nav .nav-item .nav-link {
color: #4a438f;
font-weight: bold;
}
#customNavbar .btn-custom {
background-color: #4a438f;
color: #fff;
}
body {
margin-top: 60px;
font-family: 'Poppins', sans-serif;
background: #fff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #4a438f;
text-align: justify;
}