Not able to load header and footer when loading base64 encoded .docx file using OfficeJS API

Question

Let me brief out the scenario:

• We have base64 encoded .docx file.
• Our Word Add-in has a functionality in which we request in-house API to get base64 encoded .docx file.
• This base64 encoded .docx file (which has header, footer and body) is loaded in MS Word using Word Add-in.
• The problem is document body is loaded perfectly, but header and footer are not loaded in MS Word.
• Office JS API which is used to do above is Document.Body.insertFileFromBase64().

Steps are explained with proper screenshots:

  Step – 1 Create a sample data document with header and footer details, as shown in screenshot.

Step – 2 Get Base64 encoded file string of above .docx file.

Step – 3 We have created an angular js 1.7 and angular 6 Office JS Add-in application, which accepts .docx base64 encoded file string and load that file inside MS Word.   3.1 Angular 6 Office JS Add-in application is as below:

3.2 We input base64 encoded file string from Step – 2 into textbox shown in custom Word Add-in developed by us. On clicking load file button our add-in loads actual file from base64 encoded string.

3.3 As shown in below screenshot, header and footer are vanished and only body is loaded in MS Word.

  3.4 Office JS API used in custom Word Add-in developed is context.Document.Body.insertFileFromBase64(, ) Office JS API CDN: https://appsforoffice.microsoft.com/lib/1/hosted/Office.js

Please help on this, as we are blocker state for production issue in our application.

Answer 1

This is due to how Word is designed to work.

Headers and Footers are section-level properties - they're linked to Section Breaks. By default, a Word document has one section break and the default headers and footers belong to that.

When a file is inserted into an existing document this is done without that last, default section break (which is linked to the last paragraph mark). The in-coming content takes on the section properties of the target section. This cuts off the headers and footers.

What can work is to insert a section break at the end of the document being inserted, before inserting it, making sure the headers and footers are defined for that section. This additional section break will be imported into an exsiting document and retain the headers and footers.

If existing headers and footers in the target document should be retained, things get rather more complicated. In this case, an additional section break is required in the target document in order to "hold" those headers and footers. Depending on the order things are inserted additional section breaks may also be required to ensure the content of the headers and footers are independent of one another (the default is for them to be linked so that each succeeding section "inherits" from the previous one).

The alternative is for the Office JS code to pick up the header and footer information and write it into the target document separately, using the JS API.