Learning this in order to replace the old 32 bit VBA macro template add-in for my company's letterheard wizard.
Now I learn that the JS API doesn't import contents from a local file, but it could read from OoXML, which is what MS Office uses now (ie. dotx, docx, etc.) in the form of a zip (you can basically rename the file extension from docx to zip and you can find a packaged XML files. This is why the old Office 2003 doc, xls, etc. types are out of fashion today.
In order to learn about OOXML handling with the JS API, refer to: https://docs.microsoft.com/en-us/office/dev/add-ins/word/create-better-add-ins-for-word-with-office-open-xml
Then it's good to know about the insertInlinePictureFromBase64 method. One can easily convert an image file to base64 online, and paste that base64 code into the parameter.
Now that I can insert picture, I need to find a way to make it full size to fit the paper size and not have it automatically adjusted to fit within the margins.
So according to this 2012 article/blog, floating images can't be done in the JS API, and possibly not in HTML coercion type either.
The only way to do it is perhaps using OOXML coercionType.
The key is to use the setSelectedDataAsync method. Now I guess I really do have to invest some time into learning OOXML.
Finally, some progress...I can now put an image behind text. The key: instead of
behinddoc is an attribute of wp:anchor.
This anchor thing is something called drawing floating images.
Now I just need to do image in header/footer.
This is really hard, so I posted another Stackoverflow question for help:
https://stackoverflow.com/questions/57468399/why-wont-my-header-show-in-ms-word-using-ooxml-word-js-api
I think I've written my OOXML script fine. I've tested it by saving it as an xml file and opening it with Word. Both First and Default headers work.
So it could be something else, perhaps Office.context.document.setSelectedDataAsync(myXML, { coercionType: 'ooxml' }); is only targeting active selection, which would be the main document body and not the header default, then I never was able to write any header/footer with this setSelectedDataAsync command.
Finally: Indeed the problem was caused by setSelectedDataAsync.
So the solution is to use context.document.sections.getFirst().getHeader("Primary").insertOoxml(sXml, 'Start');
Now that I have gotten the major parts out of the way, I just have a few minor kinks to handle.
One problem is Visual Studio keeps having problem building changed codes. As if nothing has changed. Like I need to do a clear cache or something.
Debugging has been hell. But now that I have learned to deploy the add-in on Office 365 (simply upload the xml manifest with revised url where the rest of the project is uploaded), I don't have to deal with Visual Studio's buggy debugger (changes don't reflect upon rebuilding).
I can now test it on MS Word web and MS Word App.
Also important command is localStorage. This stores local info. That means I can have each user set their own default settings.
It's great how this new tech is targeting for cross-platform.