<>上一篇说了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
mammothfrom '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>

技术
今日推荐
阅读数 20
阅读数 13
阅读数 10
阅读数 9
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信