前端導出Excel和打印介紹

開發後臺管理系統時，都須要實現打印、導出Excel這兩項功能，在先後臺分離的開發模式，你是否想找一個前端解決方案。這樣後端開發人員就不用爲每一個報表功能附加一個導出Excel的接口了，那咱們進入主題吧。

核心問題-導出Excel是個麻煩

打印不用多說，前端很容易搞定，由於瀏覽器自帶；主要是導出Excel，由於瀏覽器沒有默認支持，而之前大多數據項目都是後臺提供接口生成excel文件後下載。

解決問題-引入兩個開源庫

• printa-js

支持豐富內容的打印組件，原名print-js，printa-js是本人fork後加以改動增長了對頁底部內容自定義的功能。git地址：https://github.com/cqhaibin/Print.js

• xlsx

前端導出excel解決方案 git地址：https://github.com/SheetJS/sheetjs

• npm安裝包

npm install --save printa-js xlsx

• 導入包

import * as printJS from 'printa-js'
import * as XLSX from 'xlsx'

打印與導出JSON的通用代碼

打印

/**
 * 普通的打印方法
 * data: 數據
 * columns：列集合
 * title: 標題
 * subTitle: 副標題
 * 數據格式
 * properties: [{filed:'id', displayName: 'title'}]
 * printable: [{ id:1 },{id: 2}]
 * @param opt { printable: datas, properties: columns }
 */
export function printTable ({ data, columns, header, footer }) {
  const props = []
  columns.forEach(c => {
    if (c.ignorePrint) {
      return
    }
    props.push({
      field: c.field,
      displayName: c.label
    })
  })
  const distData = []
  data.forEach(item => {
    const tmp = {}
    columns.forEach(c => {
      if (item[c.field] !== undefined) {
        let val = item[c.field]
        if (c.format) {
          val = c.format(val, item)
        }
        Object.defineProperty(tmp, c.field, {
          value: val || ''
        })
      }
    })
    distData.push(tmp)
  })
  const opt = {
    properties: props,
    printable: distData,
    header: '<div class="header" >' + (header || '') + '</div>',
    style: ' .title { text-align: center; }, .second-title{ font-size:12px; font-weidth: norm; }, .line{ text-decoration: underline; } ',
    type: 'json',
    footer: footer || ''
  }
  printJS(opt)
}

導出Excel

/**
 * 導出excel
 * 數據格式：
 * [
        ['姓名', '年齡', '日期'],
        ['sam', 20, new Date()],
        ['long', 20, new Date()]
   ]
 */
export function excelTable ({ data, columns, title, fName, footer }) {
  const props = []
  columns.forEach(c => {
    if (c.ignorePrint) {
      return
    }
    props.push(c.label)
  })
  const distData = []
  distData.push(props)
  data.forEach(item => {
    const tmp = []
    columns.forEach(c => {
      if (item[c.field] !== undefined) {
        let val = item[c.field]
        if (c.format) {
          val = c.format(val, item)
        }
        tmp.push(val || '')
      } else {

      }
    })
    distData.push(tmp)
  })

  distData.unshift([title])

  const sheet = XLSX.utils.aoa_to_sheet(distData)
  const len = props.length
  sheet['!merges'] = [
    {
      s: {
        c: 0,
        r: 0
      },
      e: {
        c: len,
        r: 0
      }
    }
  ]
  const wb = {
    SheetNames: ['sheet1'],
    Sheets: {}
  }
  wb.Sheets.sheet1 = sheet
  // not support ie
  const fileName = fName || (title + '-' + (new Date()).getTime()) + '.xls'
  XLSX.writeFile(wb, fileName)
}