js在线预览word文件

最新推荐文章于 2024-04-27 09:16:44 发布

原创最新推荐文章于 2024-04-27 09:16:44 发布 · 1.3k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

meiba2021

关注

标签

#javascript #c# #服务器

分类前端开发

收录于

本文介绍如何使用JavaScript实现Word文件的在线预览功能，通过HTML和JS代码示例展示具体步骤，适用于Web应用中查看Word文档的需求。

js在线预览word文件

html代码

    <input type="file" class="mm">
    <div class="word-wrap">
        <div id="wordView"></div>
    </div>

js代码

<script src="../js/jquery-1.11.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mammoth@1.4.8/mammoth.browser.min.js"></script>
<script>
    $(".mm").on("change", function () {
        readFileInputEventAsArrayBuffer(function (arrayBuffer) {
            mammoth.convertToHtml({
                    arrayBuffer: arrayBuffer
                })
                .then(function (resultObject) {
                    $("#wordView").html(resultObject.value)
                })
                .done();
        })
    })
    function readFileInputEventAsArrayBuffer(callback) {
        var file = $(".mm")[0].files[0];
        var reader = new FileReader();
        reader.onload = function (loadEvent) {
            var arrayBuffer = loadEvent.target.result;
            callback(arrayBuffer);
        };
        reader.readAsArrayBuffer(file);
    }
</script>