Python 3 Flask Project to Generate Word DOCX File From Dynamic Text & Images Using HTML5 Form Library in Browser

Welcome folks today in this blog post we will be generating docx file from dynamic text and images in html5 form in browser using python-docx library in browser using flask. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below libraries using the pip command as shown below

pip install flask

pip install python-docx

And after that you need to make an app.py file and copy paste the following code

app.py

from io import BytesIO
from flask import Flask, render_template, request, send_file
from docx import Document

app = Flask(__name__)

@app.route('/')
def form():
  return render_template('index.html')

if __name__ == '__main__':
    app.run()

from io import BytesIO

from flask import Flask, render_template, request, send_file

from docx import Document

app = Flask(__name__)

@app.route('/')

def form():

return render_template('index.html')

if __name__ == '__main__':

app.run()

As you can see we are importing the flask library and then we are also importing the python-docx library at the top to generate word docx document using dynamic text and images submitted in html5 form. And then we have started the flask app at the port number 5000. And then we have initialized the / route where we are loading the index.html template file. For this you need to create the templates folder and inside it you need to create the index.html file and copy paste the following code

templates/index.html

<form method="POST" enctype="multipart/form-data" action="/submit">
  <textarea name="text" cols="45" rows="5"></textarea><br><br>
  <input type="file" name="image" multiple>
  <input type="submit" value="Submit">
</form>

</form>

As you can see we have the simple textarea where we allow the user to write the raw text and then we have the input field where we allow the user to select multiple image files to be inserted inside the docx file and then we have the submit button to generate the word docx document. Now if you start the flask app using the below command

python app.py

Now we need to write the post request to actually generate docxfiles from the text and image which is selected by the user using the textarea and input field as shown below

@app.route('/submit', methods=['POST'])
def submit():
  text = request.form['text']
  images = request.files.getlist("image")
  
  # Create a new docx file and add the text and images to it
  document = Document()
  document.add_paragraph(text)
  for image in images:
    document.add_picture(image)
  
  # Save the docx file to a desired location
  file_name = "document.docx"
  file_buffer = BytesIO()
  document.save(file_buffer)
  file_buffer.seek(0)

    # Send the file buffer to the client
  return send_file(file_buffer, as_attachment=True,download_name=file_name)

@app.route('/submit', methods=['POST'])

def submit():

text = request.form['text']

images = request.files.getlist("image")

# Create a new docx file and add the text and images to it

document = Document()

document.add_paragraph(text)

for image in images:

document.add_picture(image)

# Save the docx file to a desired location

file_name = "document.docx"

file_buffer = BytesIO()

document.save(file_buffer)

file_buffer.seek(0)

# Send the file buffer to the client

return send_file(file_buffer, as_attachment=True,download_name=file_name)

As you can see inside the above function we are first of all comparing the request if it’s equal to POST and then we are using the request module to get access to the text submitted by the user using the textarea widget and all the files selected by the user. And then we are initializing the Document() constructor to make a new word document and then inside it we are inserting the text as a paragraph using the add_paragraph() method and then we are using the for loop to insert all the selected images inside the pdf document using the add_picture() method. And then we are allowing the user to download the pdf document as an attachment inside the browser using the buffer

Full Source Code