Question

我刚刚使用github上的javascript找到了一个工作的docx到html转换器。将docx转换为html的主要代码如下。问题是页面只有一个按钮，单击或拖动并选择一个word文档，将其打开为html。我想在代码中指定一个文件位置，这样我就可以在服务器上加载它来从本地加载一些文件。

将docx转换为html并呈现的代码：

  <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 = e.target.files;更改为var files = "C:/sda/path/to/docx";，但这没有帮助。

我试图改变

var files = e.target.files;

到

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

但是它给了我 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>

同样的问题还需要input.files [0]

更新：我试图使用评论中提到的方法但遇到一些错误：

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;
});

在我使用https://calibre-ebook.com/downloads/demos/demo.docx而不是上面文件路径中的demo.docx之前，错误主要是“仅支持HTTP的交叉源请求”。但是这会产生另一个错误：

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

这意味着chrome无法加载它。它需要在服务器上工作。如果有人可以帮助提供修复程序以使其脱机工作，请告诉我。最后一个方法是异步调用。

Answer 1

在浏览器中，有一个沙箱策略。

它无法直接通过Path访问文件。

请通过拖放操作访问该文件丢弃事件或输入文件更改事件。

自定义DocxJS以呈现本地docx文件

1 个答案: