JavaScriptを使用してブラウザでWord文書(.doc、.docx)をレンダリングする方法


  1. Google Docs Viewerを使用する方法: Google Docs Viewerを使用すると、ブラウザ上でWord文書を表示できます。以下は、Google Docs Viewerを使用するためのコード例です。
var fileId = "YOUR_FILE_ID"; // Word文書のGoogle DriveファイルID
var viewerUrl = "https://docs.google.com/viewer?embedded=true&url=";
var docUrl = "https://docs.google.com/file/d/" + fileId + "/preview";
var iframe = document.createElement("iframe");
iframe.src = viewerUrl + encodeURIComponent(docUrl);
iframe.style.width = "100%";
iframe.style.height = "600px";
document.body.appendChild(iframe);

この方法では、Google DriveにWord文書をアップロードし、そのファイルのIDを使用してfileId変数に設定する必要があります。

  1. Office Web Viewerを使用する方法: Office Web Viewerを使用することで、ブラウザ上でWord文書を表示できます。以下は、Office Web Viewerを使用するためのコード例です。
var docUrl = "YOUR_DOC_URL"; // Word文書のURL
var viewerUrl = "https://view.officeapps.live.com/op/embed.aspx?src=";
var iframe = document.createElement("iframe");
iframe.src = viewerUrl + encodeURIComponent(docUrl);
iframe.style.width = "100%";
iframe.style.height = "600px";
document.body.appendChild(iframe);

この方法では、YOUR_DOC_URLにWord文書のURLを指定する必要があります。

  1. ライブラリを使用する方法: サードパーティのライブラリを使用することで、ブラウザ上でWord文書をレンダリングできます。例えば、"mammoth.js"と呼ばれるライブラリを使用する方法があります。以下は、mammoth.jsを使用するためのコード例です。

まず、mammoth.jsをインストールします。

npm install mammoth

次に、以下のようなコードを使用してWord文書をレンダリングします。

var mammoth = require("mammoth");
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    var arrayBuffer = event.target.result;
    mammoth.extractRawText({ arrayBuffer: arrayBuffer })
      .then(function(result) {
        var text = result.value;
        var div = document.createElement("div");
        div.textContent = text;
        document.body.appendChild(div);
      })
      .done();
  };
  reader.readAsArrayBuffer(file);
});

この方法では、fileInputというIDを持つinput要素をHTMLに追加し、ユーザーがWord文書を選択できるようにする必要があります。選択されたファイルは、FileReaderを使用して読み込まれ、mammoth.jsを使用してテキストに変換されます。その後、結果を表示するためのdiv要素が作成されます。

これらの方法のいずれかを選択して、ブラウザ上でWord文書をレンダリングすることができます。選択した方法に応じて、適切なコードを使用してください。