第一步:
在index.html中引入xlsx.js

<script src="./static/xlsx.js"></script>

第二步:
在组件里定义三个全局变量

var stringArray = []
const borderExcel = {
  top: {
    style: 'thin'
  },
  bottom: {
    style: 'thin'
  },
  left: {
    style: 'thin'
  },
  right: {
    style: 'thin'
  }
}

image.png

第三步:

 // 这是导出的方法
 exportExcel (json) {
       // json数据是导出的表格数据
      var copyJson = [{}]
      for (var i = 0; i < json.length; i++) {
        copyJson[i] = {
          code: json[i].code == null ? '-' : json[i].code,
          name: json[i].name == null ? '-' : json[i].name,
          cost: json[i].cost == null ? '-' : json[i].cost,
          percent: json[i].percent == null ? '-' : json[i].percent,
          remark: json[i].remark == null ? '-' : json[i].remark
        }
      }
      var tmpdata = copyJson[0]
      var keyMap = []
      for (var k in tmpdata) {
        keyMap.push(k)
        // copyJson[0][k] = k
      }
      copyJson.unshift({})
      copyJson.unshift({})
      copyJson.unshift({})
      copyJson.unshift({})
      var finishdata = []
      copyJson.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
        v: v[k],
        // eslint-disable-next-line
        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
        // eslint-disable-next-line
      }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => finishdata[v.position] = {
        v: v.v,
        s: {
         //设置单元格样式
          alignment: {
            horizontal: 'center',
            vertical: 'center'
          },
          font: {
            name: '宋体',
            sz: 10,
            bold: false,
            // color: { rgb: "333333" }
          },
          fill: {
            fgColor: {
              rgb: 'ffffff'
            }
          },
          border: borderExcel
        }
      })
      // console.log(finishdata)
      var outputPos = Object.keys(finishdata)
      var headerData = ['序号', '费用名称', '投标报价金额(美元)', '占比(%)', '备注']
      finishdata['A1'] = {
       // 设置第一行样式
        v: '项目费用组成统计表',
        s: {
          alignment: {
            horizontal: 'center',
            vertical: 'center'
          },
          font: {
            sz: 18,
            bold: true
          },
          fill: {
            fgColor: {
              rgb: 'ffffff'
            }
          },
          border: borderExcel
        }
      }
      finishdata['A3'] = {
        v: '投标编辑采用汇率(1美元=**币种):',
        s: {
          alignment: {
            horizontal: 'left',
            vertical: 'center'
          },
          font: {
            sz: 10,
            bold: true
          },
          fill: {
            fgColor: {
              rgb: 'ffffff'
            }
          },
          border: borderExcel
        }
      }
      var row2 = ['项目名称（中文）:', '', '投标截止日期:     年    月    日', '填报时间:   年   月   日']
      for (let n = 0; n < row2.length; n++) {
        finishdata[this.numToString(n + 1) + '2'] = {
          v: row2[n],
          s: {
            alignment: {
              horizontal: 'left',
              vertical: 'center'
            },
            font: {
              sz: 10,
              bold: true
            },
            fill: {
              fgColor: {
                rgb: 'ffffff'
              }
            },
            border: borderExcel
          }
        }
      }
      for (var n = 0; n < headerData.length; n++) {
        finishdata[this.numToString(n + 1) + '4'] = {
          v: headerData[n],
          s: {
            alignment: {
              horizontal: 'center',
              vertical: 'center'
            },
            font: {
              sz: 10,
              bold: true
            },
            fill: {
              fgColor: {
                rgb: 'ffffff'
              }
            },
            border: borderExcel
          }
        }
      }
  // 设置合并行,合并列
      var ttt = [
        {
          s: { c: 0, r: 0 },
          e: { c: 4, r: 0 }
        },
        {
          s: { c: 0, r: 1 },
          e: { c: 1, r: 1 }
        },
        {
          s: { c: 3, r: 1 },
          e: { c: 4, r: 1 }
        },
        {
          s: { c: 0, r: 2 },
          e: { c: 4, r: 2 }
        }
      ]
      finishdata['!merges'] = ttt
    // 设置列宽
      let tmpColData = [
        { wpx: 70 },
        { wpx: 220 },
        { wpx: 220 },
        { wpx: 200 },
        { wpx: 50 }
      ]
   // 设置行高
      let rows = copyJson.map((item, index) => {
        if (index === 0 || index === 3) {
          return { hpx: 30 }
        } else {
          return { hpx: 20 }
        }
      })
      var tmpWB = {
        SheetNames: ['mySheet'],
        Sheets: {
          'mySheet': Object.assign({},
            finishdata,
            {
              '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1],
              '!cols': tmpColData,
              '!rows': rows
            })
        }
      }
      // eslint-disable-next-line
      var tmpDown = new Blob([this.setBuffer(XLSX.write(tmpWB, { bookType: 'xlsx', bookSST: false, type: 'binary' }))], { type: 'application/octet-stream' })
      this.saveAs(tmpDown, '项目费用组成统计表' + '.' + (wopts.bookType === 'biff2' ? 'xls' : wopts.bookType))
    }


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


  // 导出方法用到的方法
   numToString (numm) {
      stringArray.length = 0
      var numToStringAction = function (nnum) {
        var num = nnum - 1
        var a = parseInt(num / 26)
        var b = num % 26
        stringArray.push(String.fromCharCode(64 + parseInt(b + 1)))
        if (a > 0) {
          numToStringAction(a)
        }
      }
      numToStringAction(numm)
      return stringArray.reverse().join('')
    },

    saveAs (obj, fileName) {
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(obj, fileName)
      } else {
        var tmpa = document.createElement('a')
        tmpa.download = fileName || '下载'
        tmpa.href = URL.createObjectURL(obj)
        tmpa.click()
        setTimeout(function () {
          URL.revokeObjectURL(obj)
        }, 100)
      }
    },

    setBuffer (s) {
      if (typeof ArrayBuffer !== 'undefined') {
        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
      } else {
        var bufs = new Array(s.length)
        for (var j = 0; j !== s.length; ++j) bufs[j] = s.charCodeAt(j) & 0xFF
        return bufs
      }
    },

注意: 设置高度和部分样式需要更改部分xlsx.js源码,否则不会生效,想要源码的私信我,注明来意