vue移动端实现word在线预览
上一篇说了excel文件的预览,其实word预览跟excel预览很相似,代码都大差不差,言归正传word预览同样要使用插件,这里使用的是mammoth插件,首先vue项目引入:npm install mammoth在预览的页面导入import mammoth from ‘mammoth’同样的也引用了手势缩放和移动,在我pdf预览那篇文章有说明手势的操作,使用的AlloyFinger 手势插件。h
·
上一篇说了excel文件的预览,其实word预览跟excel预览很相似,代码都大差不差,言归正传
- word预览同样要使用插件,这里使用的是mammoth插件,首先vue项目引入:
npm install mammoth
在预览的页面导入
import mammoth from ‘mammoth’
- 同样的也引用了手势缩放和移动,在我pdf预览那篇文章有说明手势的操作,使用的AlloyFinger 手势插件。
html代码
<template>
<div class="excel-container">
<van-nav-bar
left-text="返回"
title="word查看"
left-arrow
:fixed="true"
:placeholder="true"
@click-left="back"
/>
<div ref="docPreview"></div>
</div>
</template>
js代码
- 同样的,在本地测试,把word文件放在static文件夹下,然后将url地址换成你static文件夹下的路径。
<script>
import mammoth from 'mammoth'
import AlloyFinger from "../../../static/js/alloyfinger.js";
import transform from "../../../static/js/transform.js";
import To from "../../../static/js/to.js";
export default {
data () {
return {
id: '',
url:"",// excel文件地址
goPath: '', //将要去的界面
}
},
beforeRouteEnter (to, from, next) { //监听从哪个页面过来
let path = from.fullPath;
next(vm => vm.setPath(path));
},
created(){
this.getParams()
},
mounted () {
this.previewFile();
this.getData();
},
methods: {
setPath(path) {
this.goPath = path.split("/")[1];
},
//返回键
back() {
this.$router.push({
name: this.goPath,
params: {
id: this.id
}
})
},
getParams() {
// 取到路由带过来的参数
let routerParams = this.$route.params.id
// 将数据放在当前组件的数据内
this.id = routerParams
this.url = this.$route.params.url
},
previewFile() {
let _this=this;
try {
var xhr = new XMLHttpRequest();
xhr.open("GET", this.url);
xhr.responseType = "arraybuffer";
xhr.onload = function(e) {
var arrayBuffer = xhr.response; //arrayBuffer
mammoth
.convertToHtml({ arrayBuffer: arrayBuffer })
.then(displayResult)
.done();
function displayResult(result) {
_this.$refs.docPreview.innerHTML = result.value || "";
}
};
xhr.send();
} catch (e) {
console.log(e);
_this.$emit("errorPreview");
}
},
getData() {
let that = this;
let element = that.$refs.docPreview;
Transform(element);
var initScale = 1;
this.af = new AlloyFinger(element, {
// rotate: function (evt) { //实现旋转
// element.rotateZ += evt.angle;
// },
multipointStart: function () {
initScale = element.scaleX;
},
pinch: function (evt) { //实现缩放
element.scaleX = element.scaleY = initScale * evt.zoom;
},
pressMove: function (evt) { //实现移动
element.translateX += evt.deltaX;
element.translateY += evt.deltaY;
evt.preventDefault();
},
});
},
}
}
</script>
效果
gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview
更多推荐
已为社区贡献2条内容
所有评论(0)