CODEWITHSUNDEEP
ms-wordoffice-js
cheng
cheng

Reputation: 43

Inserting watermark in Word

I would like to insert a watermark into a Word document using Office.js. I am able to insert the watermark DRAFT using the sample code from: https://github.com/OfficeDev/Word-Add-in-JS-Watermark/blob/master/WatermarksManagerWeb/Home.js. The sample code places the watermark all on pages.

I am interested in a simpler solution than the one below that places the watermark only on the first page. Thank you.

(function () {
    "use strict";

    var messageBanner;

    // The initialize function must be run each time a new page is loaded.
    Office.initialize = function (reason) {
        $(document).ready(function () {

            $('#createWM').click(insertWaterMark);
            $('#deleteWM').click(removeWM);

            $('#txtWM').val("DRAFT");

        });
    };


    function insertWaterMark() {
        Word.run(function (ctx) {
            var mySections = ctx.document.sections;
            ctx.load(mySections);
            // ctx.document.body.insertOoxml(mywatermark, "end");
            return ctx.sync().then(function () {
                var myWatermark = getWM($('#txtWM').val());
                var myHeader = mySections.items[0].getHeader("primary");
                var myRange = myHeader.insertOoxml(myWatermark, "replace");
                var myCC = myRange.insertContentControl();
                myCC.title = "myTempCC";
                myCC.appearance = "hidden";
                return ctx.sync();

            });
        }).catch(function (e) {
            app.showNotification(e.message, e.description);

        });


    }

    function getWM(text) {
        var mywatermark = "<?xml version=\"1.0\" standalone=\"yes\"?>\r\n<?mso-application progid=\"Word.Document\"?>\r\n<pkg:package xmlns:pkg=\"http://schemas.microsoft.com/office/2006/xmlPackage\"> ... THE REST OF THE OPENXML content for watermark ...</pkg:package>\r\n";
          return (mywatermark.replace("CONFIDENTIAL", text));
   }

Update: I think I have an idea how to get the watermark on the first page. I implemented the solution, but it doesn't show the watermark. Please look at my code and let me know if you see anything wrong with it. 

var mySections = ctx.document.sections;
ctx.load(mySections);

return ctx.sync().then(function () {
    var myWatermark = getWM("DRAFT");
    var myHeader = mySections.items[0].getHeader(Word.HeaderFooterType.firstPage);
    mySections.items[0].headerFooterFirstPageDifferent = true;
    var myRange = myHeader.insertOoxml(myWatermark, "replace");

    var myCC = myRange.insertContentControl();
    myCC.title = "myTempCC";
    myCC.appearance = "hidden";

    return ctx.sync();

Upvotes: 0

Views: 1261

Answers (2)

Kaique Prazeres
Kaique Prazeres

Reputation: 111

I figured out how to insert a real watermark into the body of a document.

private async insertWatermark(): void {


await Word.run(async (context) => {
      const paragraphs = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary).paragraphs;
      paragraphs.load("$none");
      await context.sync();

      const newParagraph = paragraphs.getLastOrNullObject();

      let contentControl = newParagraph.insertContentControl();
      contentControl.insertOoxml(this.addWatermarkText("My Watermark Text"), Word.InsertLocation.end);

      await context.sync();
}

private addWatermarkText(text: string = "My Watermark"): string {
    const watermark: string = 'Watermark Content HERE';

    return watermark.replace("WATERMARK", text);
}

Get Watermark content in this link for replace this code snippet 'Watermark Content HERE'

Upvotes: 0

Kaique Prazeres
Kaique Prazeres

Reputation: 111

I looked in the documentation, here on stackoverflow, on github and in several places but I couldn't find any solution that would help me to insert a watermark in the page header.

But after a few days of difficulty, I was testing all possible methods and combinations of use until I managed to understand how to insert the watermark. And it's simpler than I thought. Too bad this isn't in Microsoft Docs.

  return Word.run( (context) => {
    context.document.sections.getFirst().getHeader().insertParagraph('WaterMark', Word.InsertLocation.start);
    context.sync();
  });

Upvotes: 1

Related Questions