vue移动端实现excel在线预览

上篇博客我提到了ios手机不能实现下载功能，但是可以实现预览，图片预览和pdf预览我已经在前篇博客做了讲解，但是，在工作中大家上传最多的应该是excel的文件，今天我就讲解一下excel移动端的预览实现。

1. 预览excel当然也是需要引入插件的，这里使用的是一个SheetJS js-xlsx插件，首先在vue项目引入：

npm install xlsx

2. 然后在要预览excel的页面引入

import XLSX from ‘xlsx’

3. 只能预览肯定不行，有些文件数据可能很多，在手机上显示就很小，根本看不清，这时，我们继续使用手势缩放和移动，对文件的操作就好很多了。手势缩放和移动我上文已经说了，不懂的可以看一下我的上一篇文章，使用的是一个AlloyFinger手势插件，很好用的。

html代码

<template>
  <div class="excel-container">
    <van-nav-bar
      left-text="返回"
      title="excel查看"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="back"
    />
    <div ref="preview"></div>
  </div>
</template>

js代码和style代码

• 首先说一下style代码一定要放在js代码上面，因为页面加载是从上往下的，我们在mounted()钩子函数中调用的渲染方法，已经渲染完了，style代码还没有加载，就会导致没有样式，所以放在js代码上面，会先加载样式。
• 如果你在本地测试，要把excel文件放在static文件下，然后将url换成你static文件夹下的路径，就可以显示了。放在其他文件夹下显示不出来，可能是vue项目静态文件一定要放在static下才能引到吧。

<style sceped>
.excel-container {
  width: 100%;
}
table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse:collapse;
    border:none;
    font-size:0.23rem;
}

td,th {
    width:1px;
    white-space:nowrap; /* 自适应宽度*/
    word-break:keep-all; /* 避免长单词截断，保持全部 */
    border:solid #676767 1px;
    text-align:center;
    white-space:pre-line;
    word-break:break-all !important;
    word-wrap:break-word !important;
    display:table-cell;
    vertical-align:middle !important;
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding:2px 2px 0 2px;
    display: table-cell;
}
</style>

<script>
  import * as XLSX from 'xlsx'
  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.readWorkbookFromRemoteFile(this.url);

      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
      },
      readWorkbookFromRemoteFile: function (url) {
        var xhr = new XMLHttpRequest()
        xhr.open('get', url, true)
        xhr.responseType = 'arraybuffer'
        let _this = this
        xhr.onload = function (e) {
          var binary = "";
          if (xhr.status === 200) {
            var bytes  = new Uint8Array(xhr.response)
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            var wb = XLSX.read(binary, { type: "binary" });
            var wsname = wb.SheetNames[0];
            var ws = wb.Sheets[wsname];
            var HTML = XLSX.utils.sheet_to_html(ws);
            if (_this.$refs.preview) {
              _this.$refs.preview.innerHTML = HTML;
            }
          }
        }
        xhr.send()
      },
      getData() {
        let that = this;
        let element = that.$refs.preview;
        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

下一篇: vue移动端实现word在线预览