前端可視化展現Excel

Excel可視化

• 後端返回Excel流前端進行展現

前言

需求：有的時候咱們須要接收到後端返回的Excel流，前端進行可視化展現時，這個時候按照以下步驟便可

提早說明：前端展現的Excle樣式與格式徹底由後端控制，好比合並單元格、樣式控制..

前端Demo🌰：例子 （有現成寫好的接口）

安裝依賴庫

• 安裝依賴庫（二選一便可）

  • npm install xlsx xlsx-style less less-loader@5.0.0
  • yarn add xlsx xlsx-style less less-loader@5.0.0

• 拷貝文件夾

  • src/components/x-spreadsheet
  • src/util/xlsx-exchange
  • 戳我下載👆
• 引入依賴：在你想請求展現的.vue文件中

import axios from 'axios'
import Spreadsheet from '@/components/x-spreadsheet';
import XStyle from 'xlsx-style';
import Exchange from '@/util/xlsx-exchange';

• 啓動項目：修改報錯

  • cpexcel.js (ctrl+p直接搜索文件便可)

(刪除)-- var cpt = require('./cpt' + 'able');
(添加)++ var cpt = cptable;

展現

• 定義template

<div class="content">
  <div id="xss-demo" />
</div>

• 定義data

data() {
    return {
      sheet: null,
      flobFileSize: 0,
    }
},

• 初始化xsheet

async mounted() {
  this.instantiateSheet();
},

• xsheet配置

method: {
  // 設置xsheet 數據
  setXsheetData(out) {
    this.sheet.loadData(out);
    if (out.length) {
      let colLen = Object.keys(out[0].rows[0].cells).length || 10;
      // let colLen = this.getTableColLen(out) || 10;
      let rowLen = Object.keys(out[0].rows).length || 10;
      this.sheet.sheet.data.rows.len = rowLen;
      this.sheet.sheet.data.cols.len = colLen;
      this.sheet.reRender();
    }
  },
  // 實例化 xsheet
  instantiateSheet() {
    let queryListHeight = 0;
    if (this.$refs.queryList)
      queryListHeight = this.$refs.queryList.$el.offsetHeight || 0;
    this.sheet = new Spreadsheet(document.getElementById("xss-demo"), {
      mode: "read", // edit | read
      showToolbar: false,
      showGrid: false,
      showContextmenu: false,
      view: {
        height: () =>
          document.documentElement.clientHeight - 180 - queryListHeight,
        width: () => document.documentElement.clientWidth - 300,
      },
      row: {
        height: 25,
        len: 100,
      },
      col: {
        len: 16,
        width: 100,
        indexWidth: 60,
        minWidth: 60,
      },
    });
  },
}

• 發送請求

axios({
  url: 'http://39.102.36.212:3006/excelExport',
  method: 'post',
  responseType: 'blob'
}).then((res) => {
  const self = this
  const result = res.data
  this.flobFileSize = result.size || 0;
  if (result instanceof Blob) {
    var reader = new FileReader();
    reader.onload = function (e) {
      let data = e.target.result;
      console.log(data)
      if (data) {
        let workbook = XStyle.read(data, { type: "binary", cellStyles: true });
        let out = Exchange.stox(workbook);
        self.setXsheetData(out)
      } else {
        self.setXsheetData([])
      }
    };
    reader.readAsBinaryString(result);
  } else {
    self.setXsheetData([])
  }
})

• 展示效果