利用docx-preview在线阅览word

html 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        article > .docx_toc.docx-num-35-undefined {
            margin-bottom: 1em;
        }

        .docx_toc1 a, .docx_toc2 a {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            color: #333;
            position: relative;
        }

        .docx_toc1 a > span, .docx_toc2 a > span {
            color: #333;
            text-decoration: none;
        }

        .docx_toc1 a > span:last-child, .docx_toc2 a > span:last-child {
            float: right;
            color: #333;
            background-color: #fff;
            text-indent: 1rem;
            z-index: 10;
            position: relative;
        }

        .docx_toc1 a > span:nth-last-child(2), .docx_toc2 a > span:nth-last-child(2) {
            position: absolute;
            display: inline-block;
            top: 50%;
            width: 95%;
            height: 0 !important;
            min-height: 1px;
            vertical-align: middle;
            border-bottom-style: dotted;
        }

        .docx_toc1 span.docx_afa {
            text-decoration: none;
        }

        .docx_toc1 a:hover span.docx_afa {
            text-decoration: underline;
            color: #000;
        }

        .docx_toc1 a:hover span.docx_afa:first-child {
            text-decoration: underline;
            color: #000;
        }

        .docx_toc1 a:hover span:last-child {
            text-decoration: underline;
            color: #000;
        }


        .docx_toc1 a:hover span > span {
            text-decoration: none !important;
        }

        .docx_toc2 a:hover span:last-child {
            text-decoration: underline;
            color: #000;
        }

        .docx_toc2 a:hover span.docx_afa {
            text-decoration: underline;
            color: #000;
        }

        .docx_toc2 a:hover span.docx_afa:first-child {
            text-decoration: underline;
            color: #000;
        }

        .docx_toc2 a:hover span > span {
            text-decoration: none !important;
        }
        article img{
            cursor: pointer;
            transition: .2s ease-in-out;
        }

        article img:hover {
            transform: scale(1.1);
            box-shadow: rgba(0, 0, 0, 0.1) 0 0 27px 10px;
            z-index: 10;
        }
    </style>
</head>

<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<!-- docx-preview 可以npm install 下载，也可以使用官网cdn地址，自行百度-->
<script src="./js/docx-preview.min.js"></script>
<!-- <script src="https://volodymyrbaydalka.github.io/docxjs//dist/docx-preview.js"></script> -->

<body>
<div id="wordViewer"></div>
<script type="module">
    import {utils} from "./js/utils.js";

    let url = utils.getQueryVariable("url");
    url = url ? url : 'index.docx'
    wordView(url);
    console.log(document.getElementsByTagName("title"));
    document.getElementsByTagName("title")[0].text = url;

    function wordView(url) {
        let vm = this;
        let xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.responseType = "arraybuffer";
        xhr.onload = function () {
            if (xhr.status === 200) {
                docx.renderAsync(xhr.response, document.getElementById("wordViewer"))
                    .then(x => {console.log("docx: finished");mybind();});
            }
        };
        xhr.send();
    }

    function mybind(){
        var element = document.querySelectorAll("article img");
        console.log(element)
        for (let elementElement of element) {
            console.log(elementElement)
            elementElement.onclick = function (e) {
                // 忽略
            }
        }
    }
</script>

</body>
</html>

utils.js

js 复制代码

const utils = {
    getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return decodeURI(pair[1]);
            }
        }
        return false;
    },

    timerObj: {},

    /**
     * 防抖，点击再多次，最后一次生效
     *
     * @param id 操作id
     * @param call 操作函数
     * @param timeout 防抖间隔
     */
    antiShake(id, call, timeout) {
        let sortInputTimer = utils.timerObj[id];
        if (sortInputTimer) {
            // 杀掉上一个定时器
            clearTimeout(sortInputTimer);
        }
        // 开启下一个定时器
        utils.timerObj[id] = setTimeout(function () {
            clearTimeout(sortInputTimer);

            call ? call() : null;

            utils.timerObj[id] = 0;
        }, timeout ? timeout : 800);
    },

    /**
     * 限流，每次点击，只有第一次生效，到定时结束前，都不生效
     *
     * @param id 操作id
     * @param call 操作函数
     * @param timeout 限流间隔
     */
    currentLimit(id, call, timeout) {
        let sortInputTimer = utils.timerObj[id];
        // 如果有定时器，则不执行
        if (sortInputTimer) {
            return false;
        }
        call ? call() : null;
        // 开启一个定时器
        utils.timerObj[id] = setTimeout(function () {
            // 清空定时器
            clearTimeout(sortInputTimer);
            utils.timerObj[id] = 0;
        }, timeout ? timeout : 800);
    }
}

export {utils}