Search code examples
javascriptms-wordactivexobjectvisual-studio-macros

How to insert image in a particular cell of a table in word doc using JavaScript


I have one client side application which is rendering maps on browser(IE). In that application I have one HTML form which will capture some text contents and then the application will be generating one Word document, which will have all the fields submitted by the user in a tabular form. I am able to do that, but i have to insert one image from the browser(the screenshot of the map).

I divided the problem into two parts: 1) write some table contents in tabular form using javascript--- I am able to do that. 2) take screenshot of map and insert it into that word document.--- couldn't take screenshot, but tried with one dummy image from local machine and insert it into word doc.

The problem is, I want that image in fourth row and first column. But the "word.Selection" points to first cell in table.

itable.columns(1).cells(5).Range.Text="some text"; cant we use something like this to insert text or place "word.Selection" in a particular cell.

the below page serves my form request.

        <!DOCTYPE html>
        <html>

        <head>
        <script src="jquery-1.11.0.js"></script>
        <script type="text/javascript">

        function myFunction()
        {
        var table = document.getElementById("myTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = getFieldValue("FirstName");
        cell2.innerHTML = getFieldValue("lastName");
        }
         var JPEGName = "C:\\all data\\MyBT\\tasks\\dp manifold.jpg";
        function saveAsWord() {
        word = new ActiveXObject("Word.Application");
        word.visible=false;
        word.Documents.Add();
         word.Application.Visible = true;
        word.ActiveDocument.PageSetup.LineNumbering.Active=false;
        word.ActiveDocument.PageSetup.TopMargin=30;
        word.ActiveDocument.PageSetup.BottomMargin = 30;
        word.ActiveDocument.PageSetup.LeftMargin = 35;
        word.ActiveDocument.PageSetup.RightMargin = 30;
        word.ActiveDocument.PageSetup.Gutter = 0.0;
        word.Selection.Font.Bold = true;
        word.Selection.Font.Size = 14;
        word.Selection.ParagraphFormat.Alignment = 1;
        word.Selection.TypeText("form details");
        word.Selection.Font.Size = 12;
        var itable=word.ActiveDocument.Tables.Add(word.ActiveDocument.Application.Selection.Range, 16, 4);
        //itable.AutoFormat(16);

        word.ActiveDocument.Tables(1).Range.ParagraphFormat.Alignment = 0;
        itable.columns(2).cells(1).Range.ParagraphFormat.Alignment =1;
        itable.columns(2).cells(1).Range.Text="Exchange Area"
        itable.columns(3).cells(1).Range.ParagraphFormat.Alignment =0;
        itable.columns(1).cells(2).Range.Text="CSS Job No ";
        itable.columns(3).cells(2).Range.Text="Sr. No. : ";
        itable.columns(1).cells(3).Range.Text="Customer Details : "+getFieldValue("firstName");
        itable.columns(1).cells(4).Range.Text="Engineers Details    : "+getFieldValue("lastName");
        itable.columns(3).cells(4).Range.ParagraphFormat.Alignment =0;
        itable.columns(3).cells(4).Range.Text="Date : ";
        //itable.columns(3).cells(4).Range.Content.InlineShapes.AddPicture(JPEGName);
        itable.columns(1).cells(5).Range.Text="Requirement : ";
        itable.columns(3).cells(5).Range.ParagraphFormat.Alignment =0;
        itable.columns(3).cells(5).Range.Text="Survey Reqd  : ";
        itable.columns(1).cells(6).Range.Text="Visiting Date    : ";
        itable.columns(2).cells(6).Range.ParagraphFormat.Alignment =1;
        itable.columns(2).cells(6).Range.Text="Visit Time : ";
        itable.columns(1).cells(5).Range.Text="Whom To Meet : ";
        itable.columns(3).cells(5).Range.ParagraphFormat.Alignment =0;
        itable.columns(3).cells(5).Range.Text="Underground Cable    : ";
        itable.columns(1).cells(6).Range.Text="Visiting Date    : ";
        itable.columns(2).cells(6).Range.ParagraphFormat.Alignment =1;
        itable.columns(2).cells(6).Range.Text="Overhead Work : ";
        itable.columns(3).cells(6).Range.Text="Underground Civil  : ";
        itable.columns(1).cells(7).Range.Text="Location:   ";
        itable.columns(1).cells(8).Range.Text="Map Ref:    ";
        itable.columns(1).cells(10).Range.ParagraphFormat.Alignment =1;
        itable.columns(1).cells(10).Range.Text="Title:  EXPOSE BURIED JOINT";
        itable.columns(3).cells(10).Range.ParagraphFormat.Alignment =1;
        itable.columns(3).cells(10).Range.Text="Job Summary";
        itable.columns(1).cells(12).Range.ParagraphFormat.Alignment =1;
        itable.columns(1).cells(12).Range.Text="Sig. of Security Supervisior";
        itable.columns(3).cells(12).Range.ParagraphFormat.Alignment =1;
        itable.columns(3).cells(12).Range.Text="Sig. of Meeting Person";
        itable.Cell(3, 1).Merge(itable.Cell(3, 2));
        itable.Cell(4, 2).Split(1, 2);
        itable.Cell(4, 1).Merge(itable.Cell(4, 2));
        itable.Cell(4, 2).Merge(itable.Cell(4, 3));
        itable.Cell(5, 2).Split(1, 2);
        itable.Cell(5, 1).Merge(itable.Cell(5, 2));
        itable.Cell(5, 2).Merge(itable.Cell(5, 3));
        itable.Cell(7, 1).Merge(itable.Cell(7, 3));
        itable.Cell(8, 1).Merge(itable.Cell(8, 3));
        itable.Cell(9, 1).Merge(itable.Cell(9, 3));
        itable.Cell(11, 1).Merge(itable.Cell(11, 3));
        itable.Cell(13, 1).Merge(itable.Cell(13, 3));
        itable.Cell(14, 1).Merge(itable.Cell(14, 3));
        itable.Cell(15, 1).Merge(itable.Cell(15, 3));
        itable.Cell(16, 1).Merge(itable.Cell(16, 3));
        //word.Application.PrintOut(true);
        //setTimeout("appexit()",10000);
        word.Selection.TypeParagraph();
        word.Selection.InlineShapes.AddPicture(JPEGName);
        }
        </script> 
        </head>
        <body>  
        <table id="myTable" style="border:1px solid black">
        <tr>
        <td>First Name</td>
        <td>Last Name</td><td>SSN</td>
        </tr>

        </tr>
        </table><br><br><br>
        Your Social security number is <script type="text/javascript">
        document.write(getFieldValue("ssn"))
        </script>.<br>
        You entered &quot;<script type="text/javascript">
        document.write(getFieldValue("FirstName"))
        </script>&quot; as your First Name.<br>
        You entered &quot;<script type="text/javascript">
        document.write(getFieldValue("lastName"))
        </script>&quot; as your Last Name.<br>
        <button id="foo" onclick="myFunction()">Try it</button>
        <input type="button" value="print slip" onclick="saveAsWord()"/> 

        </body>
        </html>

I am new to writing script for generating MS document.


Solution

  • I have found out the code where I was doing wrong. Instead of using "word.Selection" it would be good to use "itable.cell(row,column).range" for inserting.

          itable.cell(5,1).range.InlineShapes.AddPicture(JPEGName );