欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue移动端实现excel在线预览

程序员文章站 2022-06-19 15:35:34
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实现。预览excel当然也是需要引入插件的,这里使用的是一个SheetJS js-xlsx插件,首先在vue项目引入:npm install xlsx然后在要预览excel的页面引入import XLSX from ‘xlsx’只能预览肯定不行,有些文件数据可能很多,在手机上显示就很小...
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实现。
  1. 预览excel当然也是需要引入插件的,这里使用的是一个SheetJS js-xlsx插件,首先在vue项目引入:

npm install xlsx

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

import XLSX from ‘xlsx’

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

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

本文地址:https://blog.csdn.net/weixin_45956838/article/details/111867255