vue移动端实现word在线预览

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

• « 上一篇：消息称阿里巴巴将取消“361”制度 不强制10%员工无年终奖
• » 下一篇：C语言小小游戏（随机）