vue項目中引用spreadjs方法

1.下載插件

2.放到項目文件夾的public目錄下面

 

 

 3.在項目根路徑index.html中全局引入Spread插件的JS和CSS

 

 

<script type="text/javascript" src="<%= BASE_URL %>spreadjs/scripts/gc.spread.sheets.all.13.0.0.min.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>spreadjs/scripts/gc.spread.excelio.13.0.0.min.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>spreadjs/scripts/gc.spread.sheets.resources.zh.13.0.0.min.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>spreadjs/scripts/FileSaver.min.js"></script>

 

 4.在vue文件中使用

<template>
  <div class="app-container pull-auto">
    <basic-container>
      <div class="filter-container crud-menu">
        <div class="crud-menu_left">
          <input type="file" class="form-control" id="upload_file" name="upload_file" accept=".xlsx"
                 style="display: none;" @change='changeExcel'>
          <Input placeholder="請選擇文件..." v-model="fileName" id="upload_file_tmp" style="width: 250px"
                 onclick="upload_file.click();" readonly/>
          <Button type="primary" icon="md-arrow-round-up" @click="selectExcel">瀏覽</Button>
          <Button type="primary" icon="md-arrow-round-down" @click="saveExcel">導出</Button>
          <Button type="primary" icon="ios-egg" @click="saveTemplate">保存模板</Button>
        </div>
      </div>

      <div ref="excelView" id="excelView" :style="spreadStyle"></div>

    </basic-container>
  </div>

</template>
<style scoped>

</style>

<script>
  import axios from '@/router/axios'
  export default {
    data () {
      return {
        fileName: "",
        excelIo: {},
        spread: {},
        spreadStyle: {
          width: '100%',
          height: '430px'
        }
      };
    },
    mounted () {
      this.spread = new GC.Spread.Sheets.Workbook(document.getElementById("excelView"), {sheetCount: 1});
      this.excelIo = new GC.Spread.Excel.IO();
    },
    methods: {
      //上傳EXCEL
      upExcel(){
        var excelFile = document.getElementById("upload_file").files[0];
        this.excelIo.open(excelFile, (json) => {
          var workbookObj = json;
          this.spread.fromJSON(workbookObj);
        }, function (e) {
          alert('文件讀取失敗，僅支持xlsx類型');
        });

      },
      //選擇文件
      selectExcel(){
        upload_file.click();
      },
      changeExcel(){
        var excelFile = document.getElementById("upload_file").files[0];
        this.fileName = document.getElementById("upload_file").files[0].name;
        this.upExcel();
      },
      //保存EXCEL
      saveExcel(){
        //生成時間戳
        var fileName = new Date().getTime() + '.xlsx';
        var json = this.spread.toJSON();
        this.excelIo.save(json, (blob) => {
          saveAs(blob, fileName);
        }, function (e) {
          console.log(e);
        });
      },
      //保存模板
      saveTemplate(){
        //生成時間戳
        var fileName = new Date().getTime() + '.json';
        var json = this.spread.toJSON();
        var jsontext = JSON.stringify(json);
        //前台保存
        saveAs(new Blob([jsontext], {type: "text/plain;charset=utf-8"}), fileName);
        //保存后台
        let formData = new FormData();
        var thefile = document.getElementById("upload_file").files[0];
        formData.append("file", thefile);
        formData.append("fileName", thefile.name);
        axios.post('/admin/excelup/doImport', formData).then(function (response) {
          alert("模板保存成功");
        }).catch(function (error) {
          alert("上傳失敗");
          console.log(error);
        });

      }
    }
  }
</script>

 

 

 

 

 

若需要顯示請求得到的excel而非從本地打開

 

<template ><!--xmlns="http://www.w3.org/1999/html" xmlns:v-on="http://www.w3.org/1999/xhtml"-->
    <div class="app-container pull-auto">
        <div :style='{height: winHeight}'>            
            <div style="width: 250px; margin: 10px 0">
                <el-button type="primary" @click='reload'>刷新數據</el-button>

             </div>
            <div ref="excelView" id="excelView" :style="spreadStyle"></div>

        </div>
    </div>

</template>

<script>
  export default {
    data () {
      return {
        fileName: "",
        excelIo: {},
        spread: {},
        spreadStyle: {
          width: '98%',
          height: '100%'
        },
        signInfo: '',
        winHeight: '750',

      };
    },
    created(){
      const windiwHight = document.documentElement.clientHeight || document.body.clientHeight // 可視屏幕高度
      this.winHeight = windiwHight - 120 +'px'
    },
    mounted () {
      var defaultStyle = new GC.Spread.Sheets.Style();

　　　　// 在mounted中聲明 spread 和excelIo ，避免了改變某個參數后再次請求數據渲染界面的問題，若在 openExcel方法中聲明會在該excel下方再生成一個excel
      const spread = new GC.Spread.Sheets.Workbook(document.getElementById("excelView"));
      const excelIo = new GC.Spread.Excel.IO();
      this.spread = spread
      this.excelIo = excelIo
      this.openExcel()
    },
    methods: {
      reload(){
        window.location.reload()
      }, 
      openExcel(){

        let spread = this.spread
        let excelIo = this.excelIo
        const excelFilePath = "需要請求的地址......";

        const xhr = new XMLHttpRequest();
        xhr.open('GET', excelFilePath, true);
        xhr.responseType = 'blob';

        xhr.onload = function(e) {
          if (this.status == 200) {
            const blob = this.response;
            excelIo.open(blob, function (json) {
              spread.fromJSON(json);
            }, function (e) {
              alert(e.errorMessage);
            }, {});
          }
        };

        xhr.send();
      },
  }
</script>