vue移动端实现word在线预览

上一篇说了excel文件的预览，其实word预览跟excel预览很相似，代码都大差不差，言归正传

1. word预览同样要使用插件，这里使用的是mammoth插件，首先vue项目引入：

npm install mammoth

在预览的页面导入

import mammoth from ‘mammoth’

2. 同样的也引用了手势缩放和移动，在我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