快捷導(dǎo)航

詳解如何在Vue項(xiàng)目中導(dǎo)出Excel

更新時(shí)間：2019年04月19日 09:05:51 作者：番茄炒蛋少放糖

這篇文章主要介紹了如何在Vue項(xiàng)目中導(dǎo)出Excel，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Excel 導(dǎo)出

Excel 的導(dǎo)入導(dǎo)出都是依賴于js-xlsx來實(shí)現(xiàn)的。

在 js-xlsx的基礎(chǔ)上又封裝了Export2Excel.js來方便導(dǎo)出數(shù)據(jù)。

使用

由于 Export2Excel不僅依賴js-xlsx還依賴file-saver和script-loader。

所以你先需要安裝如下命令：

npm install xlsx file-saver -S
npm install script-loader -S -D

由于js-xlsx體積還是很大的，導(dǎo)出功能也不是一個(gè)非常常用的功能，所以使用的時(shí)候建議使用懶加載。使用方法如下：

import('@/vendor/Export2Excel').then(excel => {
 excel.export_json_to_excel({
  header: tHeader, //表頭 必填
  data, //具體數(shù)據(jù) 必填
  filename: 'excel-list', //非必填, 導(dǎo)出文件的名字
  autoWidth: true, //非必填, 導(dǎo)出文件的排列方式
  bookType: 'xlsx' //非必填, 導(dǎo)出文件的格式
 })
})

注意

在v3.9.1+以后的版本中移除了對(duì) Bolb 的兼容性代碼，如果你還需要兼容很低版本的瀏覽器可以手動(dòng)引入blob-polyfill進(jìn)行兼容。

參數(shù)

參數(shù)	說明	類型	可選值	默認(rèn)值
header	導(dǎo)出數(shù)據(jù)的表頭	Array	/	[]
data	導(dǎo)出的具體數(shù)據(jù)	Array	/	[]
filename	導(dǎo)出文件名	String	/	excel-list
autoWidth	單元格是否要自適應(yīng)寬度	Boolean	true / false	true
bookType	導(dǎo)出文件類型	String	xlsx, csv, txt, more	xlsx

項(xiàng)目實(shí)戰(zhàn)

使用腳手架搭建出基本項(xiàng)目雛形,這時(shí)候在src目錄下新建一個(gè)vendor(文件名自己定義)文件夾,新建一個(gè)Export2Excel.js文件,這個(gè)文件里面在js-xlsx的基礎(chǔ)上又封裝了Export2Excel.js來方便導(dǎo)出數(shù)據(jù)。

目錄如下

Export2Excel.js代碼如下

require('script-loader!file-saver');
import XLSX from 'xlsx'

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);
 var oo = generateArray(theTable);
 var ranges = oo[1];

 /* original data */
 var data = oo[0];
 var ws_name = "SheetJS";

 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")
}

export function export_json_to_excel({
 multiHeader = [],
 header,
 data,
 filename,
 merges = [],
 autoWidth = true,
 bookType = 'xlsx'
} = {}) {
 /* original data */
 filename = filename || 'excel-list'
 data = [...data]
 data.unshift(header);

 for (let i = multiHeader.length - 1; i > -1; i--) {
  data.unshift(multiHeader[i])
 }

 var ws_name = "SheetJS";
 var wb = new Workbook(),
  ws = sheet_from_array_of_arrays(data);

 if (merges.length > 0) {
  if (!ws['!merges']) ws['!merges'] = [];
  merges.forEach(item => {
   ws['!merges'].push(XLSX.utils.decode_range(item))
  })
 }

 if (autoWidth) {
  /*設(shè)置worksheet每列的最大寬度*/
  const colWidth = data.map(row => row.map(val => {
   /*先判斷是否為null/undefined*/
   if (val == null) {
    return {
     'wch': 10
    };
   }
   /*再判斷是否為中文*/
   else if (val.toString().charCodeAt(0) > 255) {
    return {
     'wch': val.toString().length * 2
    };
   } else {
    return {
     'wch': val.toString().length
    };
   }
  }))
  /*以第一行為初始值*/
  let result = colWidth[0];
  for (let i = 1; i < colWidth.length; i++) {
   for (let j = 0; j < colWidth[i].length; j++) {
    if (result[j]['wch'] < colWidth[i][j]['wch']) {
     result[j]['wch'] = colWidth[i][j]['wch'];
    }
   }
  }
  ws['!cols'] = result;
 }

 /* add worksheet to workbook */
 wb.SheetNames.push(ws_name);
 wb.Sheets[ws_name] = ws;

 var wbout = XLSX.write(wb, {
  bookType: bookType,
  bookSST: false,
  type: 'binary'
 });
 saveAs(new Blob([s2ab(wbout)], {
  type: "application/octet-stream"
 }), `${filename}.${bookType}`);
}

新建一個(gè)exportExcel.vue模板用于導(dǎo)出Excel表格,使用代碼如下

<template>
 <div class="exportExcel">
  <div class="excel-header">
   <!--導(dǎo)出文件名稱-->
   <div class="filename">
    <label class="radio-label" style="padding-left:0;">Filename:</label>
    <el-input
     v-model="filename"
     placeholder="請(qǐng)輸入導(dǎo)出文件名"
     style="width:340px;"
    prefix-icon="el-icon-document" />
   </div>
   <!--設(shè)置表格導(dǎo)出的寬度是否自動(dòng)-->
   <div class="autoWidth">
    <label class="radio-label">Cell Auto-Width:</label>
    <el-radio-group v-model="autoWidth">
     <el-radio :label="true" border>True</el-radio>
     <el-radio :label="false" border>False</el-radio>
    </el-radio-group>
   </div>
   <!--導(dǎo)出文件后綴類型-->
   <div class="bookType">
    <label class="radio-label">Book Type:</label>
    <el-select v-model="bookType" style="width:120px;">
     <el-option v-for="item in options" :key="item" :label="item" :value="item"/>
    </el-select>
   </div>
   <!--導(dǎo)出文件-->
   <div class="download">
    <el-button
     :loading="downloadLoading"
     type="primary"
     icon="document"
    @click="handleDownload">export Excel</el-button>
   </div>
  </div>

  <el-table
   v-loading="listLoading"
   :data="list"
   element-loading-text="拼命加載中"
   border
   fit
   highlight-current-row
   height="390px"
  >
   <el-table-column align="center" label="序號(hào)" width="95">
    <template slot-scope="scope">{{ scope.$index }}</template>
   </el-table-column>
   <el-table-column label="訂單號(hào)" width="230">
    <template slot-scope="scope">{{ scope.row.title }}</template>
   </el-table-column>
   <el-table-column label="菜品" align="center">
    <template slot-scope="scope">{{ scope.row.foods }}</template>
   </el-table-column>
   <el-table-column label="收銀員" width="110" align="center">
    <template slot-scope="scope">
     <el-tag>{{ scope.row.author }}</el-tag>
    </template>
   </el-table-column>
   <el-table-column label="金額" width="115" align="center">
    <template slot-scope="scope">{{ scope.row.pageviews }}</template>
   </el-table-column>
   <el-table-column align="center" label="時(shí)間" width="220">
    <template slot-scope="scope">
     <i class="el-icon-time"/>
     <span>{{ scope.row.timestamp | parseTime('{y}-{m}-vvxyksv9kd {h}:{i}') }}</span>
    </template>
   </el-table-column>
  </el-table>
 </div>
</template>

export default {
 name: "exportExcelDialog",
 data() {
  return {
   // 列表內(nèi)容
   list: null,
   // loding窗口狀態(tài)
   listLoading: true,
   // 下載loding窗口狀態(tài)
   downloadLoading: false,
   // 導(dǎo)出文件名稱
   filename: "",
   // 導(dǎo)出表格寬度是否auto
   autoWidth: true,
   // 導(dǎo)出文件格式
   bookType: "xlsx",
   // 默認(rèn)導(dǎo)出文件后綴類型
   options: ["xlsx", "csv", "txt"]
  };
 },
 methods: {
  // 導(dǎo)出Excel表格
  handleDownload() {
   this.downloadLoading = true;
   // 懶加載該用法
   import("@/vendor/Export2Excel").then(excel => {
    // 設(shè)置導(dǎo)出表格的頭部
    const tHeader = ["序號(hào)", "訂單號(hào)", "菜品", "收銀員", "金額", "時(shí)間"];
    // 設(shè)置要導(dǎo)出的屬性
    const filterVal = [
     "id",
     "title",
     "foods",
     "author",
     "pageviews",
     "display_time"
    ];
    // 獲取當(dāng)前展示的表格數(shù)據(jù)
    const list = this.list;
    // 將要導(dǎo)出的數(shù)據(jù)進(jìn)行一個(gè)過濾
    const data = this.formatJson(filterVal, list);
    // 調(diào)用我們封裝好的方法進(jìn)行導(dǎo)出Excel
    excel.export_json_to_excel({
     // 導(dǎo)出的頭部
     header: tHeader,
     // 導(dǎo)出的內(nèi)容
     data,
     // 導(dǎo)出的文件名稱
     filename: this.filename,
     // 導(dǎo)出的表格寬度是否自動(dòng)
     autoWidth: this.autoWidth,
     // 導(dǎo)出文件的后綴類型
     bookType: this.bookType
    });
    this.downloadLoading = false;
   });
  },
  // 對(duì)要導(dǎo)出的內(nèi)容進(jìn)行過濾
  formatJson(filterVal, jsonData) {
   return jsonData.map(v =>
    filterVal.map(j => {
     if (j === "timestamp") {
      return this.parseTime(v[j]);
     } else {
      return v[j];
     }
    })
   );
  },
  // 過濾時(shí)間
  parseTime(time, cFormat) {
   if (arguments.length === 0) {
    return null;
   }
   const format = cFormat || "{y}-{m}-vvxyksv9kd {h}:{i}:{s}";
   let date;
   if (typeof time === "object") {
    date = time;
   } else {
    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
     time = parseInt(time);
    }
    if (typeof time === "number" && time.toString().length === 10) {
     time = time * 1000;
    }
    date = new Date(time);
   }
   const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
   };
   const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === "a") {
     return ["日", "一", "二", "三", "四", "五", "六"][value];
    }
    if (result.length > 0 && value < 10) {
     value = "0" + value;
    }
    return value || 0;
   });
   return timeStr;
  }
 },
 mounted() {
  // 模擬獲取數(shù)據(jù)
  setTimeout(() => {
   this.list = [
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    },
    {
     timestamp: 1432179778664,
     author: "Charles",
     comment_disabled: true,
     content_short: "mock data",
     display_time: "1994-05-25 23:37:25",
     foods: "雞翅、蘿卜、牛肉、紅燒大閘蟹、紅燒雞翅",
     id: 1,
     image_uri:
      "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
     importance: 3,
     pageviews: 2864,
     platforms: ["a-platform"],
     reviewer: "Sandra",
     status: "published",
     title: "O20190407135010000000001",
     type: "CN"
    }
   ];
   this.listLoading = false;
  }, 2000);
 },
 filters: {
  // 過濾時(shí)間
  parseTime(time, cFormat) {
   if (arguments.length === 0) {
    return null;
   }
   const format = cFormat || "{y}-{m}-vvxyksv9kd {h}:{i}:{s}";
   let date;
   if (typeof time === "object") {
    date = time;
   } else {
    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
     time = parseInt(time);
    }
    if (typeof time === "number" && time.toString().length === 10) {
     time = time * 1000;
    }
    date = new Date(time);
   }
   const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
   };
   const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === "a") {
     return ["日", "一", "二", "三", "四", "五", "六"][value];
    }
    if (result.length > 0 && value < 10) {
     value = "0" + value;
    }
    return value || 0;
   });
   return timeStr;
  }
 }
}

效果圖如下