2016-12-14 5 views
0

私はちょうど、githubのjavascriptを使用して、動作するdocx to htmlコンバータを見つけました。 docxをhtmlに変換するメインコードは以下の通りです。問題は、ページにちょうどクリックまたはドラッグし、単語の文書を選択すると、HTMLとしてそれを開くボタンがあります。私はコードをローカルでコンピュータからいくつかのドキュメントを読み込むためにサーバー上にロードすることができますコード内のファイルの場所を指定したいと思います。 HTMLにdocxファイルを変換し、レンダリングDocxJSをカスタマイズしてローカルdocxファイルをレンダリングする

コード:

<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>DocxJS Example</title> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
     <script type="text/javascript" src="https://www.docxjs.com/js/build/latest.docxjs.min.js"></script> 
    </head> 
    <body> 
     <input id="inputFiles" type="file" name="files[]" multiple="false"> 
     <div id="loaded-layout" style="width:100%;height:800px;"></div> 
     <script> 
      $(document).ready(function(){ 
       var $inputFiles = $('#inputFiles'); 
       $inputFiles.on('change', function (e) { 
        var files = e.target.files; 
        var docxJS = new DocxJS(); 

        docxJS.parse(
         files[0], 
         function() { 
          docxJS.render($('#loaded-layout')[0], function (result) { 
           if (result.isError) { 
            console.log(result.msg); 
           } else { 
            console.log("Success Render"); 
           } 
          }); 
         }, function (e) { 
          console.log("Error!", e); 
         } 
        ); 
       }); 
      }); 
     </script> 
    </body> 
</html> 

は私がvar files = "C:/sda/path/to/docx";からvar files = e.target.files;を変更しようとしたが、それは助けにはなりませんでした。

私は

var files = new Array(new File([""], "sample.docx")); 

var files = e.target.files; 

を変更しようとしましたが、それは私にOOXML解析エラーを与えます。

更新:

は、私はPHPでファイルの場所の変数を持っていると私はjavascriptのコードでは代わりにそれを使用したいとしましょう。どうすればいいのですか?

私もdocx2html javascriptのコードをチェックし、ここではそのためのコードです:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="index.js"></script> 
    <script> 
     function test(input){ 
      require("docx2html")(input.files[0]).then(function(converted){ 
       text.value=converted.toString() 
      }) 
     } 
    </script> 
</head> 
<body> 
    <input type="file" style="position:absolute;top:0" onchange="test(this)"> 
    <br/> 
    <br/> 
    <textarea id="text"></textarea> 
</body> 
</html> 

同じ問題を

ここにも[0] input.filesを必要とする更新: 私が使用しようとしていますメソッドのコメントで述べたが、いくつかのエラーが発生します。

var fil; 
    var getFileBlob = function (url, cb) { 
     var xhr = new XMLHttpRequest(); 
     xhr.open("GET", url); 
     xhr.responseType = "blob"; 
     xhr.addEventListener('load', function() { 
      cb(xhr.response); 
     }); 
     xhr.send(); 
}; 

var blobToFile = function (blob, name) { 
     blob.lastModifiedDate = new Date(); 
     blob.name = name; 
     return blob; 
}; 

var getFileObject = function(filePathOrUrl, cb) { 
     getFileBlob(filePathOrUrl, function (blob) { 
      cb(blobToFile(blob, 'test.docx')); 
     }); 
}; 

getFileObject('demo.docx', function (fileObject) { 
    console.log(fileObject); 
    fil = fileObject; 
}); 

エラーは主に「クロスオリジン・リクエストのみでサポートされていました。 HTTP "を使用する前に、上記のファイルパスにdemo.docxの代わりにhttps://calibre-ebook.com/downloads/demos/demo.docxを使用しました。しかし、これは別のエラーを与える:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 

クロムがそれをロードすることはできませんを意味しています。サーバー上で作業する必要があります。誰かがオフラインで作業できるように修正プログラムを提供することができれば、教えてください。最後の方法は非同期呼び出しでした。

+0

これをディスク上のファイルにポイントすることはできません。相対パスを使用し、これをお読みください:https://www.html5rocks.com/en/tutorials/file/xhr2/ – DannyThunder

+0

@DannyThunder私はこれを調べました: /stackoverflow.com/questions/8390855/how-to-instantiate-a-file-object-in-javascript そして上記の更新されたコードを試しましたが、OOXMLの解析エラー –

+0

@DannyThunderをどのようにPHPファイルの場所を使用するのですか上記のスクリプトを使用したPHP変数では? –

答えて

0

ブラウザには、サンドボックスポリシーがあります。

パス経由で直接ファイルにアクセスすることはできません。

ドロップドロップイベントまたは入力ファイル変更イベントでファイルにアクセスしてください。

+0

この投稿は質問に答える実際の試みではありません。 [StackOverflowはディスカッションフォーラムのようには動作しません](http:// stackoverflow。com/tour)では、すべての投稿が質問または質問の回答であるQ&Aサイトです。投稿には、[コメント](http://stackoverflow.com/help/privileges/comment) - このような小さな文章があります。これは、著者の説明を批評したり、説明を求めるのに使うことができます。これはコメントか[新しい質問](http://stackoverflow.com/questions/ask)でなければなりません。 –

関連する問題