vue-cli3导出表格excel，Export2Excel导出表格，导出多sheet excel，vue导出多页表格

痛定思痛。 2022-01-30 07:45 986阅读 0赞

**目录**

（一）直接调用

（二）、封装导出函数调用

--------------------

最近做项目中有一个导出excel表格的需求

具体思路是：后端返回给我json数据，前端根据数据和具体的几项字段去导出excel表格，还有导出多个sheet，多页表格到一个excel表里面，具体思路 根据Export2Excel插件，并修改插件Export2Excel完成导出多页(多个sheet)的excel

**第一步：安装插件 依赖**

npm install file-saver --save
    npm install xlsx --save
    npm install script-loader --save-dev

**第二步、下载两个所需要的js文件Blob.js和 Export2Excel.js。**

下载地址 微信扫描二维码下载

![20190518193202564.jpg][]

**第三步、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去**。

### （一）直接调用 ###

**第一步，在.vue中调用**

//引入字段过滤器时间过滤
    import { parseTime } from "@/utils/setMethods"
    
    
    
    handleDownload () {
          var excelDatas = [
            {
              tHeader: ["Id", "Title", "Author", "Readings", "Date"], // sheet表一头部
              filterVal: ["id", "title", "author", "pageviews", "display_time"], // 表一的数据字段
              tableDatas: this.list, // 表一的整体json数据
              sheetName: "sheet1"// 表一的sheet名字
            },
            {
              tHeader: ["序号", "标题", "作者", "服务"],
              filterVal: ["id", "title", "author", "reviewer"],
              tableDatas: this.list,
              sheetName: "sheet2"
            },
            {
              tHeader: ["序号", "名字", "描述"],
              filterVal: ["userId", "userName", "userDescription"],
              tableDatas: this.rolesList,
              sheetName: "sheet5555"
            }
          ]
    
          this.json2excel(excelDatas, "数据报表", true, "xlsx")
        },
        // tableJson 导出数据 ; filenames导出表的名字; autowidth表格宽度自动 true or false; bookTypes xlsx & csv & txt
        json2excel (tableJson, filenames, autowidth, bookTypes) {
          var that = this
    //这个是引用插件
          import("@/vendor/Export2Excel").then(excel => {
            var tHeader = []
            var dataArr = []
            var sheetnames = []
            for (var i in tableJson) {
              tHeader.push(tableJson[i].tHeader)
              dataArr.push(that.formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
              sheetnames.push(tableJson[i].sheetName)
            }
            excel.export_json_to_excel({
              header: tHeader,
              data: dataArr,
              sheetname: sheetnames,
              filename: filenames,
              autoWidth: autowidth,
              bookType: bookTypes
            })
          })
        },
        // 数据过滤，时间过滤
        formatJson (filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
            if (j === "timestamp") {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        }

**第二步：修改插件Export2Excel导出多个sheet表格，导出多页**

修改过的  Export2Excel.js 主要修改 export\_json\_to\_excel 函数

//Export2Excel.js 
    
    /* eslint-disable */
    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,
      sheetname,
      filename,
      merges = [],
      autoWidth = true,
      bookType = "xlsx"
    } = {}) {
      /* original data */
      filename = filename || "excel-list"
      data = [...data]
    
      for (var i = 0; i < header.length; i++) {
        data[i].unshift(header[i])
      }
    
      // data.unshift(header)
    
      for (let i = multiHeader.length - 1; i > -1; i--) {
        data.unshift(multiHeader[i])
      }
    
      var ws_name = sheetname
      var wb = new Workbook(),
        ws = []
      for (var j = 0; j < header.length; j++) {
        ws.push(sheet_from_array_of_arrays(data[j]))
      }
    
      if (merges.length > 0) {
        if (!ws["!merges"]) ws["!merges"] = []
        merges.forEach(item => {
          ws["!merges"].push(XLSX.utils.decode_range(item))
        })
      }
      // console.log("width", autoWidth)
      if (autoWidth) {
        /*设置worksheet每列的最大宽度*/
        var colWidth = []
        for (var k = 0; k < header.length; k++) {
          colWidth.push(
            data[k].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 = []
        for (var k = 0; k < colWidth.length; k++) {
          result[k] = colWidth[k][0]
          for (let i = 1; i < colWidth[k].length; i++) {
            for (let j = 0; j < colWidth[k][i].length; j++) {
              if (result[k][j]["wch"] < colWidth[k][i][j]["wch"]) {
                result[k][j]["wch"] = colWidth[k][i][j]["wch"]
              }
            }
          }
        }
        // 分别给sheet表设置宽度
        for (var l = 0; l < result.length; l++) {
          ws[l]["!cols"] = result[l]
        }
      }
    
      /* add worksheet to workbook */
      for (var k = 0; k < header.length; k++) {
        wb.SheetNames.push(ws_name[k])
        wb.Sheets[ws_name[k]] = ws[k]
      }
    
      var wbout = XLSX.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: "binary"
      })
      saveAs(
        new Blob([s2ab(wbout)], {
          type: "application/octet-stream"
        }),
        `${filename}.${bookType}`
      )
    }

Export2Excel.js 原文件

// Export2Excel.js 
    /* eslint-disable */
    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) {
        /*设置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}`);
    }

## ##

### （二）、封装导出函数调用 ###

在src中新建utils文件夹 ——> 新建文件setMethods.js

setMethods.js

/**
     * Parse the time to string
     * @param {(Object|string|number)} time
     * @param {string} cFormat
     * @returns {string}
     */
    export function parseTime (time, cFormat) {
      if (arguments.length === 0) {
        return null
      }
      const format = cFormat || "{y}-{m}-{d} {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()
      }
      // eslint-disable-next-line
      const time_str = 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
      })
      // eslint-disable-next-line
      return time_str
    }
    
    /**
     * Parse the json to excel
     *  tableJson 导出数据 ; filenames导出表的名字; autowidth表格宽度自动 true or false; bookTypes xlsx & csv & txt
     * @param {(Object)} tableJson
     * @param {string} filenames
     * @param {boolean} autowidth
     * @param {string} bookTypes
     */
    export function json2excel (tableJson, filenames, autowidth, bookTypes) {
      import("@/vendor/Export2Excel").then(excel => {
        var tHeader = []
        var dataArr = []
        var sheetnames = []
        for (var i in tableJson) {
          tHeader.push(tableJson[i].tHeader)
          dataArr.push(formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
          sheetnames.push(tableJson[i].sheetName)
        }
        excel.export_json_to_excel({
          header: tHeader,
          data: dataArr,
          sheetname: sheetnames,
          filename: filenames,
          autoWidth: autowidth,
          bookType: bookTypes
        })
      })
    }
    // 数据过滤，时间过滤
    function formatJson (filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    }

在需要使用到的 .vue文件组件中调用上面封装的函数

//exportExcel.vue
    
    <script>
    import { parseTime } from "@/utils/setMethods"
    import { json2excel } from "@/utils/setMethods.js"
    export default {
      props: {
    
      },
      data () {
        return {
          listLoading: true,
          //表格的数据
          list: [
            {
              "id": 1,
              "timestamp": 375676396994,
              "author": "Melissa",
              "reviewer": "Angela",
              "title": "Gxjxpr Jdfjwf Lxssr Deyonm Moxy Ryxhzp Gxtukv Bvnmvmlo",
              "content_short": "mock data",
              "forecast": 29.75,
              "importance": 2,
              "type": "EU",
              "status": "published",
              "display_time": "1998-10-24 01:53:18",
              "comment_disabled": true,
              "pageviews": 1670,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 2,
              "timestamp": 14742538820,
              "author": "Anthony",
              "reviewer": "Angela",
              "title": "Ueeislixa Heid Dvcspjcuw Rrjyqi Wsqgyjsw",
              "content_short": "mock data",
              "forecast": 22.76,
              "importance": 2,
              "type": "JP",
              "status": "published",
              "display_time": "1990-03-21 05:30:52",
              "comment_disabled": true,
              "pageviews": 328,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 3,
              "timestamp": 1315789932004,
              "author": "Sharon",
              "reviewer": "Brian",
              "title": "Oofunoeoob Xreaujp Ndl Xoin Nyp Iedlihw Jlxyvu Ropkbfi Rljxpyl",
              "content_short": "mock data",
              "forecast": 36.57,
              "importance": 1,
              "type": "CN",
              "status": "deleted",
              "display_time": "1992-08-24 05:55:59",
              "comment_disabled": true,
              "pageviews": 1815,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 4,
              "timestamp": 538203551911,
              "author": "Scott",
              "reviewer": "Joseph",
              "title": "Yxrxsh Vwstgjqg Xqokntiuh Yrhsc Iiiugfk Hmoc",
              "content_short": "mock data",
              "forecast": 0.82,
              "importance": 2,
              "type": "US",
              "status": "draft",
              "display_time": "1982-10-19 21:06:25",
              "comment_disabled": true,
              "pageviews": 1575,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 5,
              "timestamp": 1171719793154,
              "author": "Barbara",
              "reviewer": "Angela",
              "title": "Xvewsrudv Sojbjzssbn Nqcnslcl Fwtx Sertvsqnnf Rxnom Jxhrdyqv Tyvktmi Dqeypf",
              "content_short": "mock data",
              "forecast": 22.84,
              "importance": 2,
              "type": "JP",
              "status": "published",
              "display_time": "1995-06-18 08:45:39",
              "comment_disabled": true,
              "pageviews": 1086,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 6,
              "timestamp": 98663463269,
              "author": "Dorothy",
              "reviewer": "Sharon",
              "title": "Jaeiqv Murhokxs Jeocvo Mdwf Ktgobp",
              "content_short": "mock data",
              "forecast": 84.76,
              "importance": 2,
              "type": "EU",
              "status": "published",
              "display_time": "1995-03-26 02:35:50",
              "comment_disabled": true,
              "pageviews": 1338,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 7,
              "timestamp": 846870802127,
              "author": "Richard",
              "reviewer": "Timothy",
              "title": "Hriiunzrh Jvt Xxtvpzype Gqoe Lkppdfbqh Txrfpgn Ykrloytzg Mgirqldy",
              "content_short": "mock data",
              "forecast": 35.18,
              "importance": 3,
              "type": "CN",
              "status": "draft",
              "display_time": "1973-07-02 19:02:43",
              "comment_disabled": true,
              "pageviews": 1335,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 8,
              "timestamp": 590582195083,
              "author": "George",
              "reviewer": "Helen",
              "title": "Tgcwifqcw Gogg Jsuypoa Hutu Rofnrslx Tntc Xehodrw Qrnsro Bcyilwymy",
              "content_short": "mock data",
              "forecast": 86.58,
              "importance": 2,
              "type": "US",
              "status": "draft",
              "display_time": "1980-06-28 20:47:17",
              "comment_disabled": true,
              "pageviews": 4937,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 9,
              "timestamp": 1548532983975,
              "author": "Brian",
              "reviewer": "Steven",
              "title": "Snasvoim Downll Npwbwionp Ihkdljs Yaxz Eugflokdf Hbevbqu Poukwladr Ahfkxfs",
              "content_short": "mock data",
              "forecast": 47.15,
              "importance": 2,
              "type": "CN",
              "status": "published",
              "display_time": "1993-01-05 23:12:51",
              "comment_disabled": true,
              "pageviews": 446,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 10,
              "timestamp": 1138507667384,
              "author": "Barbara",
              "reviewer": "Sandra",
              "title": "Elmpsxop Weih Bqimmtc Jnuv Stpuwnb Uouobwknbp Ntbq Jhxi Brqa Gmfowqi",
              "content_short": "mock data",
              "forecast": 49.13,
              "importance": 3,
              "type": "JP",
              "status": "draft",
              "display_time": "1995-07-06 04:31:51",
              "comment_disabled": true,
              "pageviews": 3377,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 11,
              "timestamp": 750337088505,
              "author": "Jose",
              "reviewer": "Sharon",
              "title": "Zzlns Pihvy Kgkok Xvcmm Fnryj Qulepu Khhnj Cpmy",
              "content_short": "mock data",
              "forecast": 88.75,
              "importance": 3,
              "type": "US",
              "status": "deleted",
              "display_time": "1974-11-21 19:51:59",
              "comment_disabled": true,
              "pageviews": 1965,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 12,
              "timestamp": 565505138784,
              "author": "Jennifer",
              "reviewer": "Edward",
              "title": "Kcqxrt Niwyrh Oop Dbbcmpjj Xstzd Obbucdnt Pprwq Puuclbxy Azzybptzc",
              "content_short": "mock data",
              "forecast": 97.64,
              "importance": 1,
              "type": "CN",
              "status": "published",
              "display_time": "1987-09-19 16:39:23",
              "comment_disabled": true,
              "pageviews": 488,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 13,
              "timestamp": 1109875948324,
              "author": "Laura",
              "reviewer": "Sharon",
              "title": "Hqbwqboqcb Fjixrn Sga Uioh Mjmxtbkom Nzsenp Wnqnrucee",
              "content_short": "mock data",
              "forecast": 44.47,
              "importance": 2,
              "type": "CN",
              "status": "published",
              "display_time": "2014-08-25 15:04:18",
              "comment_disabled": true,
              "pageviews": 2218,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 14,
              "timestamp": 1039817210594,
              "author": "Paul",
              "reviewer": "Ronald",
              "title": "Femyw Yvzgz Phhiht Svrxuoul Raxdisb Dpkhny Ynjrxxb Oykyn",
              "content_short": "mock data",
              "forecast": 93.17,
              "importance": 2,
              "type": "US",
              "status": "draft",
              "display_time": "2010-01-02 01:53:12",
              "comment_disabled": true,
              "pageviews": 2046,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 15,
              "timestamp": 1330523892167,
              "author": "Lisa",
              "reviewer": "Carol",
              "title": "Nqfdpohr Ovvodhn Agctq Dqtxloqo Wiqkrqds Lfkuy Nefqnwte Ryr",
              "content_short": "mock data",
              "forecast": 47.98,
              "importance": 2,
              "type": "US",
              "status": "draft",
              "display_time": "1999-12-12 15:07:15",
              "comment_disabled": true,
              "pageviews": 3265,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 16,
              "timestamp": 422707252878,
              "author": "Linda",
              "reviewer": "Kenneth",
              "title": "Hxguq Stg Xjpsiq Yhcstrkix Uljbt Xgdnb Vkowujuj Xse",
              "content_short": "mock data",
              "forecast": 20.19,
              "importance": 3,
              "type": "US",
              "status": "draft",
              "display_time": "1971-04-10 04:13:50",
              "comment_disabled": true,
              "pageviews": 564,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 17,
              "timestamp": 5845605622,
              "author": "Jeffrey",
              "reviewer": "Steven",
              "title": "Xzdix Miorfek Hqbkpuu Hwho Fqmhhpist Hitsf Unmh",
              "content_short": "mock data",
              "forecast": 32.68,
              "importance": 1,
              "type": "US",
              "status": "draft",
              "display_time": "1987-11-14 08:09:31",
              "comment_disabled": true,
              "pageviews": 2087,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 18,
              "timestamp": 272475524524,
              "author": "Joseph",
              "reviewer": "Sandra",
              "title": "Wmeim Uncmpq Iolymbvmdc Pkojiqc Utcskuu Qselvstud",
              "content_short": "mock data",
              "forecast": 94.84,
              "importance": 2,
              "type": "JP",
              "status": "draft",
              "display_time": "2012-12-16 01:54:13",
              "comment_disabled": true,
              "pageviews": 745,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 19,
              "timestamp": 590437287594,
              "author": "Karen",
              "reviewer": "Ruth",
              "title": "Gvred Vbdtfn Vbby Viokn Xzjyqri Dqi Dgkd Ttelcmi Spqmqo Sui",
              "content_short": "mock data",
              "forecast": 44.47,
              "importance": 3,
              "type": "JP",
              "status": "deleted",
              "display_time": "2013-11-21 06:36:17",
              "comment_disabled": true,
              "pageviews": 4950,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            },
            {
              "id": 20,
              "timestamp": 749752800977,
              "author": "Anthony",
              "reviewer": "Betty",
              "title": "Ccvicm Cttckbtw Esbeukpqvl Dmnt Eekplww Yjeqrxgc Vqhbyr Axhffgf",
              "content_short": "mock data",
              "forecast": 50.06,
              "importance": 2,
              "type": "US",
              "status": "draft",
              "display_time": "2012-02-04 03:48:46",
              "comment_disabled": true,
              "pageviews": 640,
              "image_uri": "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3",
              "platforms": [
                "a-platform"
              ]
            }
          ],
          rolesList: [
            {
              userId: 123,
              userNum: "admin", // 用户账号
              userName: "admin", // 用户名称
              userDescription: "这个账户是超级管理员账户"
            }, {
              userId: 124,
              userNum: "wxf123", // 用户账号
              userName: "张三", // 用户名称
              userDescription: "这个账户是一级管理员账户"
            }, {
              userId: 125,
              userNum: "cz123", // 用户账号
              userName: "李氏", // 用户名称
              userDescription: "这个账户是二级管理员账户"
            }
          ]
    
        }
      },
      computed: {
    
      },
      created () {
    
      },
      mounted () {
        this.listLoading = false
      },
      watch: {
    
      },
      methods: {
        //点击下载事件
        handleDownload () {
            //注意：组装的导出excel所需要的数据结构
          var excelDatas = [
            {
              tHeader: ["Id", "Title", "Author", "Readings", "Date"], // sheet表一头部
              filterVal: ["id", "title", "author", "pageviews", "display_time"], // 表一的数据字段
              tableDatas: this.list, // 表一的整体json数据
              sheetName: "sheet1"// 表一的sheet名字
            },
            {
              tHeader: ["序号", "标题", "作者", "服务"],
              filterVal: ["id", "title", "author", "reviewer"],
              tableDatas: this.list,
              sheetName: "sheet2"
            },
            {
              tHeader: ["序号", "名字", "描述"],
              filterVal: ["userId", "userName", "userDescription"],
              tableDatas: this.rolesList,
              sheetName: "sheet5555"
            }
          ]
            //   引入的函数
          json2excel(excelDatas, "数据报表", true, "xlsx")
        }
    
      },
      components: {
    
      },
      filters: {
        timestampToTime (val, timestamp) {
          return parseTime(val, timestamp)
        }
      }
    }
    </script>

亲测有效！！  欢迎留言交流

[20190518193202564.jpg]: /images/20220130/7fcfe624f94b4e16aa22dc3c1ac19adc.png