vue 预览 excel

vue 预览 excel

1.下载插件

npm install xlsx

2.导入插件

import XLSX from 'xlsx'

3.核心代码

<!--  -->
<template>
  <div class=''>
    <van-nav-bar title="预览excel"
                 left-text="返回"
                 left-arrow
                 class="title"
                 @click-left="onClickLeft"
                 fixed
                 :placeholder="isFixedHeight"
    />
    <div ref="preview"></div>

  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  name: 'Excle',
  data() {
    return {
      isFixedHeight: true,
      url: 'https://xxxx.xlsx',
    }
  },
  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    },

    readWorkbookFromRemoteFile() {
      var xhr = new XMLHttpRequest()
      xhr.open('get', this.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()
    },


  },

  created() {
    this.readWorkbookFromRemoteFile();
  }

}
</script>
<style scoped>

.word-wrap {
  padding: 15px;

  /*img {*/
  /*  width: 100%;*/
  /*}*/
}

</style>