vue

关于vue导入excel数据分析,以及导出excel模版数据

2022-06-12  本文已影响0人  Morbid_D

1.vue导入模版信息。进行数据操作

首先要安装  npm install file-saver   npm install xlsx   npm install script-loader,在src下面创建一个excel文件夹,查创建2个js(Blob.js,Export2Excel.js)

Export2Excel.js======>内容如下

//Export2Excel.js

/* eslint-disable */

require('script-loader!file-saver');

require('./Blob.js');//转二进制用  这边要写你的blob的实际地址

require('script-loader!xlsx/dist/xlsx.core.min');

function generateArray(table) {

  var out = [];

  var rows = table.querySelectorAll('tr');

  var ranges = [];

  for (var R = 0; R < rows.length; ++R) {

    var outRow = [];

    var row = rows[R];

    var columns = row.querySelectorAll('td');

    for (var C = 0; C < columns.length; ++C) {

      var cell = columns[C];

      var colspan = cell.getAttribute('colspan');

      var rowspan = cell.getAttribute('rowspan');

      var cellValue = cell.innerText;

      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges

      ranges.forEach(function(range) {

        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {

          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);

        }

      });

      //Handle Row Span

      if (rowspan || colspan) {

        rowspan = rowspan || 1;

        colspan = colspan || 1;

        ranges.push({

          s: {

            r: R,

            c: outRow.length

          },

          e: {

            r: R + rowspan - 1,

            c: outRow.length + colspan - 1

          }

        });

      };

      //Handle Value

      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan

      if (colspan)

        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);

    }

    out.push(outRow);

  }

  return [out, ranges];

};

function datenum(v, date1904) {

  if (date1904) v += 1462;

  var epoch = Date.parse(v);

  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);

}

function sheet_from_array_of_arrays(data, opts) {

  var ws = {};

  var range = {

    s: {

      c: 10000000,

      r: 10000000

    },

    e: {

      c: 0,

      r: 0

    }

  };

  for (var R = 0; R != data.length; ++R) {

    for (var C = 0; C != data[R].length; ++C) {

      if (range.s.r > R) range.s.r = R;

      if (range.s.c > C) range.s.c = C;

      if (range.e.r < R) range.e.r = R;

      if (range.e.c < C) range.e.c = C;

      var cell = {

        v: data[R][C]

      };

      if (cell.v == null) continue;

      var cell_ref = XLSX.utils.encode_cell({

        c: C,

        r: R

      });

      if (typeof cell.v === 'number') cell.t = 'n';

      else if (typeof cell.v === 'boolean') cell.t = 'b';

      else if (cell.v instanceof Date) {

        cell.t = 'n';

        cell.z = XLSX.SSF._table[14];

        cell.v = datenum(cell.v);

      } else cell.t = 's';

      ws[cell_ref] = cell;

    }

  }

  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);

  return ws;

}

function Workbook() {

  if (!(this instanceof Workbook)) return new Workbook();

  this.SheetNames = [];

  this.Sheets = {};

}

function s2ab(s) {

  var buf = new ArrayBuffer(s.length);

  var view = new Uint8Array(buf);

  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

  return buf;

}

export function export_table_to_excel(id) {

  var theTable = document.getElementById(id);

  console.log('a')

  var oo = generateArray(theTable);

  var ranges = oo[1];

  /* original data */

  var data = oo[0];

  var ws_name = "SheetJS";

  console.log(data);

  var wb = new Workbook(),

    ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */

  // ws['!cols'] = ['apple', 'banan'];

  ws['!merges'] = ranges;

  /* add worksheet to workbook */

  wb.SheetNames.push(ws_name);

  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {

    bookType: 'xlsx',

    bookSST: false,

    type: 'binary'

  });

  saveAs(new Blob([s2ab(wbout)], {

    type: "application/octet-stream"

  }), "test.xlsx")

}

function formatJson(jsonData) {

  console.log(jsonData)

}

export function export_json_to_excel(th, jsonData, defaultTitle) {

  /* original data */

  var data = jsonData;

  data.unshift(th);

  var ws_name = "SheetJS";

  var wb = new Workbook(),

    ws = sheet_from_array_of_arrays(data);

  /* add worksheet to workbook */

  wb.SheetNames.push(ws_name);

  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {

    bookType: 'xlsx',

    bookSST: false,

    type: 'binary'

  });

  var title = defaultTitle || '列表'

  saveAs(new Blob([s2ab(wbout)], {

    type: "application/octet-stream"

  }), title + ".xlsx")

};

====================分割线=====================

Blob.js内容如下==========》

/* eslint-disable */

/*  Blob.js

* A Blob implementation.

* 2014-05-27

*

* By Eli Grey, http://eligrey.com

* By Devin Samarin, https://github.com/eboyjr

* License: X11/MIT

*  See LICENSE.md

*/

/*global self, unescape */

/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,

plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function (view) {

  "use strict";

  view.URL = view.URL || view.webkitURL;

  if (view.Blob && view.URL) {

      try {

          new Blob;

          return;

      } catch (e) {}

  }

  // Internally we use a BlobBuilder implementation to base Blob off of

  // in order to support older browsers that only have BlobBuilder

  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {

          var

              get_class = function(object) {

                  return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];

              }

              , FakeBlobBuilder = function BlobBuilder() {

                  this.data = [];

              }

              , FakeBlob = function Blob(data, type, encoding) {

                  this.data = data;

                  this.size = data.length;

                  this.type = type;

                  this.encoding = encoding;

              }

              , FBB_proto = FakeBlobBuilder.prototype

              , FB_proto = FakeBlob.prototype

              , FileReaderSync = view.FileReaderSync

              , FileException = function(type) {

                  this.code = this[this.name = type];

              }

              , file_ex_codes = (

                  "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "

                  + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"

              ).split(" ")

              , file_ex_code = file_ex_codes.length

              , real_URL = view.URL || view.webkitURL || view

              , real_create_object_URL = real_URL.createObjectURL

              , real_revoke_object_URL = real_URL.revokeObjectURL

              , URL = real_URL

              , btoa = view.btoa

              , atob = view.atob

              , ArrayBuffer = view.ArrayBuffer

              , Uint8Array = view.Uint8Array

              ;

          FakeBlob.fake = FB_proto.fake = true;

          while (file_ex_code--) {

              FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;

          }

          if (!real_URL.createObjectURL) {

              URL = view.URL = {};

          }

          URL.createObjectURL = function(blob) {

              var

                  type = blob.type

                  , data_URI_header

                  ;

              if (type === null) {

                  type = "application/octet-stream";

              }

              if (blob instanceof FakeBlob) {

                  data_URI_header = "data:" + type;

                  if (blob.encoding === "base64") {

                      return data_URI_header + ";base64," + blob.data;

                  } else if (blob.encoding === "URI") {

                      return data_URI_header + "," + decodeURIComponent(blob.data);

                  } if (btoa) {

                      return data_URI_header + ";base64," + btoa(blob.data);

                  } else {

                      return data_URI_header + "," + encodeURIComponent(blob.data);

                  }

              } else if (real_create_object_URL) {

                  return real_create_object_URL.call(real_URL, blob);

              }

          };

          URL.revokeObjectURL = function(object_URL) {

              if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {

                  real_revoke_object_URL.call(real_URL, object_URL);

              }

          };

          FBB_proto.append = function(data/*, endings*/) {

              var bb = this.data;

              // decode data to a binary string

              if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {

                  var

                      str = ""

                      , buf = new Uint8Array(data)

                      , i = 0

                      , buf_len = buf.length

                      ;

                  for (; i < buf_len; i++) {

                      str += String.fromCharCode(buf[i]);

                  }

                  bb.push(str);

              } else if (get_class(data) === "Blob" || get_class(data) === "File") {

                  if (FileReaderSync) {

                      var fr = new FileReaderSync;

                      bb.push(fr.readAsBinaryString(data));

                  } else {

                      // async FileReader won't work as BlobBuilder is sync

                      throw new FileException("NOT_READABLE_ERR");

                  }

              } else if (data instanceof FakeBlob) {

                  if (data.encoding === "base64" && atob) {

                      bb.push(atob(data.data));

                  } else if (data.encoding === "URI") {

                      bb.push(decodeURIComponent(data.data));

                  } else if (data.encoding === "raw") {

                      bb.push(data.data);

                  }

              } else {

                  if (typeof data !== "string") {

                      data += ""; // convert unsupported types to strings

                  }

                  // decode UTF-16 to binary string

                  bb.push(unescape(encodeURIComponent(data)));

              }

          };

          FBB_proto.getBlob = function(type) {

              if (!arguments.length) {

                  type = null;

              }

              return new FakeBlob(this.data.join(""), type, "raw");

          };

          FBB_proto.toString = function() {

              return "[object BlobBuilder]";

          };

          FB_proto.slice = function(start, end, type) {

              var args = arguments.length;

              if (args < 3) {

                  type = null;

              }

              return new FakeBlob(

                  this.data.slice(start, args > 1 ? end : this.data.length)

                  , type

                  , this.encoding

              );

          };

          FB_proto.toString = function() {

              return "[object Blob]";

          };

          FB_proto.close = function() {

              this.size = this.data.length = 0;

          };

          return FakeBlobBuilder;

      }(view));

  view.Blob = function Blob(blobParts, options) {

      var type = options ? (options.type || "") : "";

      var builder = new BlobBuilder();

      if (blobParts) {

          for (var i = 0, len = blobParts.length; i < len; i++) {

              builder.append(blobParts[i]);

          }

      }

      return builder.getBlob(type);

  };

}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

使用这2个js进行对Excel的数据分析

1.首先在页面中引入import XLSX from 'xlsx',这里我是用的是element的上传组件

<el-upload action='' :auto-upload="false" :on-change="processFile" :limit="1">

          <el-button type="primary" size="small"  class="primaryButton" style="width:150px;">选择XLSX文件</el-button>

        </el-upload>

2.上传的解析的方法 processFile

processFile(file, fileList) {

      const reader = new FileReader();

      reader.onload = (e) => {

        /* 解析数据 */

        const bstr = e.target.result;

        const wb = XLSX.read(bstr, {type: 'binary'});

        /* 获取文件的第一个工作表(WorkSheet) */

        const wsname = wb.SheetNames[0];

        const ws = wb.Sheets[wsname];

        /* 数组转换 */

        const data = XLSX.utils.sheet_to_json(ws, {header: 1});

        /* 进行表格数据更新 */

        console.log(data)

        //这里的data就是处理完成的数据,需要把第一项删除

        /* 进行表格表头数据更新 */

        this.cols = this.getHeaderRow(ws);

      };

      reader.readAsBinaryString(file.raw);

    }

getHeaderRow(sheet) {

        const headers = [];

        /* sheet['!ref']表示所有单元格的范围,例如从A1到F8则记录为 A1:F8*/

        const range = XLSX.utils.decode_range(sheet['!ref']);

        let C, R = range.s.r; /* 从第一行开始 */

        /* 按列进行数据遍历 */

        for (C = range.s.c; C <= range.e.c; ++C) {

            /* 查找第一行中的单元格 */

            const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})]

            let hdr = "UNKNOWN " + C; // <-- 进行默认值设置

            if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);

            headers.push(hdr);

        }

        return headers;

    },

2.关于导出excel数据模版

exportToExcel() {//导出时候的按钮方法

        //excel数据导出

        let uploadData = [

          {

            name:'阿胶',

            spec:'3g/袋',

            unit:'袋',

            price:'2.13',

          }

        ]

        require.ensure([], () => {

            const {

                export_json_to_excel

            } = require('@/Excel/Export2Excel');

            const tHeader = ['name','spec', 'unit','price'];//头部的数据

            const filterVal = ['name','spec', 'unit','price'];//头部对应的操作数据

            const list = uploadData;//需要导出的数据

            const data = this.formatJson(filterVal, list);

            export_json_to_excel(tHeader, data, '中药药品导入模版');

        })

    },

    formatJson(filterVal, jsonData) {

        return jsonData.map(v => filterVal.map(j => v[j]))

    },

上一篇下一篇

猜你喜欢

热点阅读