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>
<script src="https://unpkg.com/jszip/dist/jszip.min.js">script>
<script src="./js/docx-preview.min.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
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}