如何调用
https://xxxx.com.cn/xxxindex.html?wordUrl=文件地址
- 使用docx-preview预览word 仅支持docx文件
- worView/index.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: 0.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>
- worView/js/utils.js
const utils = {
getQueryVariable(variable) {
let query = window.location.search.substring(1)
let vars = query.split('wordUrl=')
return vars[1]
},
}
export { utils }
- 使用iframe
- wordView/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文件预览</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#file-doc {
width: 100vw;
height: 100vh;
display: none;
}
#file-img {
width: 80%;
height: 80%;
display: none;
object-fit: contain;
}
</style>
</head>
<body>
<div id="file-doc"></div>
<img id="file-img" />
<script async>
function getQueryHash() {
let after = window.location.search
let query = after.split('?wordUrl=')
return query[1]
}
const doc_preview = (res_url) => {
document.addEventListener('contextmenu', function (event) {
event.preventDefault()
})
const pdf_dom = document.getElementById('file-doc')
pdf_dom.style.display = 'block'
pdf_dom.innerHTML = `
<iframe
style="oncontextmenu: return false;height:100%;"
frameborder="0"
src="${res_url}"
width="100%"
height="100%"
></iframe>`
}
// 获取URL字符串
const getParamsUrl = () => {
return new Promise((resolve, reject) => {
try {
let urlParameterValue = getQueryHash()
console.log(urlParameterValue)
resolve(urlParameterValue)
} catch (error) {
reject(error)
}
})
}
getParamsUrl().then((res) => {
return doc_preview(res)
})
</script>
</body>
</html>
