[Officeアドイン]ローカルの画像ファイルをWord文書に挿入する。

ホーム
Office アドイン, Office関連, Office 2016
[Officeアドイン]ローカルの画像ファイルをWord文書に挿入する。

2016.03.15

[Officeアドイン]ローカルの画像ファイルをWord文書に挿入する。

「OfficeJS Snippet Explorerを使って新しいOffice アドインを体験する」で紹介していますが、新しくなったJavaScript API(Word v2 JavaScript API / Excel v2 JavaScript API)ではコードの書き方もシンプルになり、できることもかなり増えました。

今回はWordAPIで新たに追加されたRangeオブジェクトのinsertInlinePictureFromBase64メソッドを使って、ローカルに保存された画像ファイルをWord文書に挿入するコードを紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title>Sample</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
  <script>
    Office.initialize = function(reason){
      $(document).ready(function(){
        if(Office.context.requirements.isSetSupported("WordApi", 1.2)){
          $("#iptImg").change(insertPicture);
        }else{
          console.log("This code requires Word 2016 or greater.");
        }
      });
    };
    
    function insertPicture(){
      if(!this.files.length){return;}
      var file = this.files[0];
      var fr = new FileReader();
      fr.onload = function(event){
        var base64 = event.target.result.split(",")[1];
        Word.run(function(ctx){
          var rng = ctx.document.getSelection();
          rng.insertInlinePictureFromBase64(base64, "Start");
          return ctx.sync().then(function(){
            console.log("done.");
          });
        }).catch(function(error){
          console.log("Error: " + error);
          if(error instanceof OfficeExtension.Error){
            console.log("Debug info: " + JSON.stringify(error.debugInfo));
          }
        });
      }
      fr.readAsDataURL(file);
    }
  </script>
</head>
<body>
  <p><input id="btnTest" type="button" value="Test"></p>
  <p><input id="iptImg" type="file"></p>
  <p><textarea id="result"></textarea></p>
</body>
</html>

上記コードを実行すると、下図のようにinput type=”file”(iptImg)で選択した画像ファイルがWord文書の選択位置に挿入されます。

insertInlinePictureFromBase64_01

上記コードでやっていることは、File APIでローカル画像ファイルをbase64文字列として取得、取得した文字列をinsertInlinePictureFromBase64メソッドに渡して文書に挿入するという、非常にシンプルなものです。

VBAで同じことをやろうと思ったら、

Public Sub Sample()
  With Application.FileDialog(msoFileDialogFilePicker)
    If .Show Then Selection.InlineShapes.AddPicture .SelectedItems(1)
  End With
End Sub

上記のようにほんの数行で出来てしまう事なので、これでもまだ冗長に思うかもしれませんが、以前のOffice アドインに比べたら大きな進歩です。
日々進化しているOffice アドイン、興味がある方は是非お試しください。