1.安装
npm install docx-preview
npm install alloyfinger
2.完整代码如下
获取onLoad()中options参数的文档地址,赋值值给url
<template>
<div class="main" ref='main'>
<div class="word" :style="{ transform: `scale(${w})` }">
<div id="bodyContainer" ref="wordDiv"
:style="{ 'transform': 'translate(' + posX + 'px,' + posY + 'px) translateZ(0px) scale(' + dis + ')' }"></div>
</div>
</div>
</template>
<script>
import { renderAsync } from "docx-preview";
import AlloyFinger from 'alloyfinger';
var initScale = 1;
export default {
data() {
return {
docxOptions: {
className: "kaimo-docx-666", // string:默认和文档样式类的类名/前缀
inWrapper: true, // boolean:启用围绕文档内容的包装器渲染
ignoreWidth: false, // boolean:禁用页面的渲染宽度
ignoreHeight: false, // boolean:禁止渲染页面高度
ignoreFonts: false, // boolean:禁用字体渲染
breakPages: true, // boolean:在分页符上启用分页
ignoreLastRenderedPageBreak: true, // boolean:在 lastRenderedPageBreak 元素上禁用分页
experimental: false, // boolean:启用实验功能(制表符停止计算)
trimXmlDeclaration: true, // boolean:如果为true,解析前会从 xml 文档中移除 xml 声明
useBase64URL: false, // boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL
useMathMLPolyfill: false, // boolean:包括用于 chrome、edge 等的 MathML polyfill。
showChanges: false, // boolean:启用文档更改的实验性渲染(插入/删除)
debug: false, // boolean:启用额外的日志记录
},
style: {
},
w: 0,
url: null,
posX: 0,
posY: 0,
dis: 1,
}
},
onLoad(options) {
console.log('asd',options.url)
this.url = options.url
},
mounted() {
if (this.url) {
this.getFileFromUrl(this.url, 'word').then(res => {
console.log(res)
this.docxRender(res)
})
this.setScale()
window.onresize = this.Debounce(this.setScale, 1000)
this.setScale2()
}
},
methods: {
setScale2() {
let speed = 1.5
let min = .5
new AlloyFinger(this.$refs.main, {
pinch: (evt) => {
console.log("实现缩放");
this.dis = initScale * evt.zoom;
if (this.dis < 1) this.dis = 1
},
pressMove: (evt) => {
this.posX += evt.deltaX * speed;
this.posY += evt.deltaY * speed;
},
multipointEnd: () => {
initScale = this.dis;
}
})
},
docxRender(buffer) {
let bodyContainer = document.getElementById("bodyContainer");
renderAsync(
buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer, // HTMLElement 渲染文档内容的元素,
null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。
this.docxOptions // 配置
).then(res => {
console.log(res.data)
})
},
getFileFromUrl(url, fileName) {
return new Promise((resolve, reject) => {
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.setRequestHeader('Accept', 'image/png');
xhr.responseType = "blob";
// 加载时处理
xhr.onload = () => {
// 获取返回结果
blob = xhr.response;
let file = new File([blob], fileName, { type: 'image/png' });
// 返回结果
resolve(file);
};
xhr.onerror = (e) => {
reject(e)
};
// 发送
xhr.send();
});
},
setScale() {
setTimeout(() => {
let bodyContainer = document.getElementById("bodyContainer");
// this.w =window.innerWidth / bodyContainer.offsetWidth
this.w = window.innerWidth < 768 ? window.innerWidth / 768 : window.innerWidth / bodyContainer.offsetWidth
// this.style = {
// transform: `scale(${w})`
// }
}, 200)
},
Debounce(fn, t) {
const delay = t || 500
let timer
return function () {
const args = arguments
if (timer) {
clearTimeout(timer)
}
const context = this
timer = setTimeout(() => {
timer = null
console.log(this.w, window.innerWidth, document.getElementById("bodyContainer").offsetWidth);
fn.apply(context, args)
}, delay)
}
},
}
}
</script>
<style>
uni-page-body {
background-color: white !important;
}
</style>
<style scoped>
.word {
transform: scale(0.6);
transform-origin: top center;
transition: transform 0.4s;
}
</style>