Seamlessly Embed MS Word Document into your Flask Website

The easiest way to convert your word document to blog post

Figure1. Word document seamlessly embedded into a html file

This method is the easiest and most seamless way I have found to post your word document as a blog post.

In this article I will go over the keys to build this application or use it for yourself.

Github repository here.

Why?

Almost everything I write makes its way to MS word document. Then it might go to an email, medium post, conveyed by phone call, or the worst of all: translated into a website with a custom html file. I say worst of all because sometimes this can take up a lot of time and when it’s all done there is almost always a little formatting issue that isn’t quite right.

This process is great because it standardizes everything so not only is it fast but its consistent.

How does it work?

Step 1: Write a Post Using MS Word

Step 2: Save the MS Word doc as html

Once I am ready to post my MS Word document, I save a version as “Web Page, Filtered (.htm)”. The image below shows my options for saving from my Mac. There are two Web Page options. The main difference between “Web Page (.htm)” and “Web Page, Filtered (.htm)” is that the latter saves the images in another folder which we need. Use “Web Page, Filtered (.htm)”.

Figure 2. MS Word save as options (Web Page, Filtered (.htm))

Step 3: Compress the images folder

Compress the images folder which has the extension “.fld”. Below is a screen shot of this from my Mac.

Figure 3. Compress images folder from Web Page, Filtered save

Step 4: Post to the application

Below in Gif 1, you see the Flask web application uploading process in action. The top most field is for a title which is optional. Basically, all my MS Word documents have similar formats. I use the MS default styles — usually the first line in my document is a title. This app will read the first line of the document as a title. If you choose to change the title you can write whatever you want, and it replaces it both for the table below in the home page and of the post itself.

Next, we have the input field for the .html file. This is the post itself that you saved in Step 2: Save the MS Word doc as html above.

Finally, is the input for .zip file you created in Step 3: Compress the images folder above.

Once you click submit the post will appear in the table below and you can click on it.

Gif 1. Upload post/word-doc-converted-to-html

How does it work?

I am not going to go into detail about building a Flask Application. I am going to point out the keys to making this functionality work.

1. Jinja code using include

2. Saving to templates directory

3. Beautiful soup

Jinja code using include

The section heading is simply because if you nothing but this little bit on syntax from this article, I would consider this a successful use of our time.

“The include tag renders another template and outputs the result into the current template.”

-source: https://jinja.palletsprojects.com/en/3.1.x/templates/

Even though I have been using Jinja templates for a while, I am unaware of many Jinja statements such as include. It replaces what would otherwise likely be JavaScript to make this work.

{% include blog_file_path %}

Note: “{“ + “%” cannot be adjacent to each other in the word document. That is why the above is a figure/image and not a code snippet.

In my application, I display posts in this view_post.html file. In it I pass a Jinja variable blog_file_path that has the file name in a string of the post/word-doc-converted-to-html that I want to display. In Figure 4, I add the include statement to render the MS Word document converted to html.

{% extends "_layout.html" %}
{% block main %}
<section class="main">
  <div class="view_post_page">
    <div class="html_sub">
      {% include blog_file_path %}<!-- embeds the html file -->
    </div>
  </div>
</section>
{% endblock %}

Issues with uploading the html file

In a typical Flask application, the html files are stored in a templates folder. Figure 4, has is my folder structure with my templates directory.

Figure 4. Folder structure

I initially wanted to save the file directly using os and/or flask objects but for some reason I was unable to. I kept getting errors that I did not bother to really try to figure out. For example, this is what I thought would work, but does not:

def templates_file_path_and_name(filename, root_path):
    temp_file_name = "temporary_file_for_path_name.txt"
    f = open(temp_file_name,'w')
    f.write(root_path)
    f.write(os.path.join('/templates/blogposts', filename))
    f.close()

    f = open(temp_file_name,'r')
    file_path_and_name = f.readlines()[0]
    f.close()
    return file_path_and_name

html_file_path_and_name = templates_file_path_and_name(filename, app.config.root_path)
file.save(html_file_path_and_name)

It’s a little hacky, I know, and I wouldn’t be surprised if I did something wrong so I would be glad to hear that I don’t need to make the text file. Perhaps, I was using os or the flask objects incorrectly.

Search and replace reference to images

Beautiful soup is used to search and replace the image references in the uploaded posts/word-converted-to-html files.

If you want to see how I used beautifulsoup go to my github repo and see the create_new_html_text in the utils.py file.

I am not going to go over all the details especially, since I am not pro at using beautifulsoup. The key is that, if your post has images, the it will have references to the images in the folder that get created alongside the html file (Step 2: Save the MS Word doc as html).

In order to use those images we want to either save the .fld directory with the .html file in the templates folder, which might not be a bad solution but I didn’t like or try it. Instead, I chose to save the .fld directory in the static folder (see blogpost_images in Figure 5).

To do this I manually compress the file. Then in the upload process there is another file input field just for the compressed images folders. The application programmatically decompress and save to the static folder.

Finally, using beautifulsoup I edit the post/word-converted-to-html file with replacing the .fld folder name with the full path to ../static/blogpost_images/…fld.

Conclusion

Hopefully, this article helps you post articles or create posting functionality to your applications in a way that is efficient. In the end this saves me time because its clean and standardized. Standardization does way more than saving time. Primarily, it keeps things neat and organized so people familiar with your writing know where to look.

If you’ve skipped to the bottom to get to the functionality and now want to take a look at the application I built that uses this functionality check it out here: https://blogtemplate02.dashanddata.com/.