1 . 安裝? npm? ?i? ? excxljs
2. 安裝 npm? ?i? ?file-saver
3. 封裝函數(shù)
import * as ExcelJS from 'exceljs'
import fileSaver from 'file-saver'
/**
?*
?* @param {*} json 表格數(shù)據(jù)，對象數(shù)組
?* @param {*} tHead 表頭，數(shù)組，定義表頭和對應(yīng)的鍵,eg:{header:'年齡',key:'age'}
?* @param {*} fileName 導(dǎo)出文件的文件名
?* @param {*} sheetName 導(dǎo)出文件的表名
?*/
export const exportByExcelJs = (json, tHead, fileName = '導(dǎo)出文件', sheetName = 'Sheet1') => {
? //初始化一個(gè)工作表，填充一些基礎(chǔ)信息
? let workbook = new ExcelJS.Workbook()
? let worksheet = workbook.addWorksheet(sheetName)
? //設(shè)置表頭，并用addRows添加我們要導(dǎo)出的數(shù)據(jù)
? worksheet.columns = tHead
? worksheet.addRows(json)
? //設(shè)置表頭樣式
? let style = {
? ? font: {
? ? ? name: '宋體',
? ? ? size: 11,
? ? ? bold: true,
? ? ? color: { argb: '#00000000' }
? ? },
? ? alignment: {
? ? ? vertical: 'middle',
? ? ? horizontal: 'center',
? ? ? wrapText: false
? ? },
? ? border: {
? ? ? top: {style: 'thin'},
? ? ? bottom: {style: 'thin'},
? ? ? left: {style: 'thin'},
? ? ? right: {style: 'thin'}
? ? },
? ? fill: {
? ? ? type: 'pattern',
? ? ? pattern: 'solid',
? ? ? fgColor: { argb: 'b2b2b200' }
? ? ? // bgColor: { argb: 'FF0000FF' }
? ? }
? }
? //遍歷工作表，給需要添加樣式的單元格添加相應(yīng)的樣式
? for (let i = 1; i < worksheet._columns.length + 1; i++) {
? ? let cellName = getColumnNameByIndex(i - 1) + 1
? ? worksheet.getCell(cellName).style = style
? ? let maxLen = 0
? ? for (let k = 1; k < worksheet._rows.length + 1; k++) {
? ? ? worksheet.getRow(k).height = 13.5 //行高
? ? ? if (k > 1) worksheet.getRow(k).height = 102
? ? ? worksheet.getRow(k).getCell(i).alignment = {
? ? ? ? vertical: "middle",
? ? ? ? horizontal: "center",
? ? ? ? wrapText: true
? ? ? }
? ? ? worksheet.getRow(k).getCell(i).font = {
? ? ? ? name: "Arial Unicode MS",
? ? ? ? size: 10
? ? ? }
? ? ? worksheet.getRow(k).getCell(i).border = {
? ? ? ? top: {style: 'thick'},
? ? ? ? bottom: {style: 'thick'},
? ? ? ? left: {style: 'thick'},
? ? ? ? right: {style: 'thick'}
? ? ? }
? ? ? // 計(jì)算列自適應(yīng)寬度，限制最寬為20（一個(gè)中文字符寬度為2，英文和數(shù)字寬度為1.5）
? ? ? let cellValue = worksheet.getCell(getColumnNameByIndex(i - 1) + k).value
? ? ? let strLen = 0
? ? ? if (cellValue !== null && cellValue !== '') {
? ? ? ? cellValue = cellValue.toString()
? ? ? ? let chVal = cellValue.match(/[\u4e00-\u9fa5]/g)
? ? ? ? ? ? cellValue.match(/[\u4e00-\u9fa5]/g).join('')
? ? ? ? ? : ''
? ? ? ? // let engVal = cellValue.replace(/([^\u0000-\u00FF])/g, '') || ''
? ? ? ? let engVal = ''
? ? ? ? strLen += chVal.length * 2 + engVal.length * 1.5
? ? ? ? if (strLen > maxLen) {
? ? ? ? ? maxLen = strLen
? ? ? ? }
? ? ? }
? ? }
? ? maxLen > 20 ? (maxLen = 20) : null
? ? // worksheet.getColumn(i).width = maxLen //列寬
? }
? // 導(dǎo)出
? workbook.xlsx.writeBuffer().then(function(buffer) {
? ? fileSaver(
? ? ? new Blob([buffer], {
? ? ? ? type: 'application/octet-stream'
? ? ? }),
? ? ? `${fileName}.xlsx`
? ? )
? })
}
//通過列數(shù)獲取excel表頭編號(hào)
const getColumnNameByIndex = i => {
? let result = String.fromCharCode('A'.charCodeAt() + (i % 26))
? while (i >= 26) {
? ? i /= 26
? ? i--
? ? result = String.fromCharCode('A'.charCodeAt() + (i % 26)) + result
? }
? return result
}
4.頁面中使用
<template>
? ? <div>
? ? ? ? <button @click="exportTableWithImages(toExcelData,headers)">導(dǎo)出</button>
? ? </div>
</template>
5.內(nèi)容數(shù)據(jù)
const toExcelData = ?ref( [
? {
? ? index: 1, // 序號(hào)
? ? banner: "", // 圖片
? ? title: "vmagiccare絲絨抗靜電梳氣囊梳子氣墊梳女士梳頭蓬松頭皮按摩", // 產(chǎn)品名稱
? ? goods_sku: "朱砂紅\n咖啡色\n藏藍(lán)色", // 產(chǎn)品規(guī)格
? ? bottom_price: "9.90", // SKU最低價(jià)
? ? max_price: "9.90", // SKU最高價(jià)
? ? commission_ratio: "12.00", // 傭金比例
? ? partner_url: "", // 傭金鏈接
? ? delivery_place: "48小時(shí)內(nèi)從廣東省發(fā)貨，包郵", // 發(fā)貨地點(diǎn)
? ? platform_product_id: "3646387021733308549", // 商品ID
? ? store_store_creadit_goods: 97, // 商品體驗(yàn)分
? ? store_store_creadit_service: 100, // 商家服務(wù)分
? ? store_store_creadit_logistics: 94 // 物流體驗(yàn)分
? }
])
6.表格頭
const headers = ref( [
? { header: "序號(hào)", key: "index", width: 11 },
? { header: "圖片", key: "banner", width: 18.5 },
? { header: "產(chǎn)品名稱", key: "title", width: 34 },
? { header: "產(chǎn)品規(guī)格", key: "goods_sku", width: 50 },
? { header: "SKU最低價(jià)", key: "bottom_price", width: 33 },
? { header: "SKU最高價(jià)", key: "max_price", width: 33 },
? { header: "傭金比例", key: "commission_ratio", width: 33 },
? { header: "傭金鏈接", key: "partner_url", width: 40 },
? { header: "發(fā)貨地點(diǎn)", key: "delivery_place", width: 33 },
? { header: "商品id", key: "platform_product_id", width: 33 },
? { header: "商品體驗(yàn)分", key: "store_store_creadit_goods", width: 33 },
? { header: "商家服務(wù)分", key: "store_store_creadit_service", width: 33 },
? { header: "物流體驗(yàn)分", key: "store_store_creadit_logistics", width: 33 }
])
7.導(dǎo)出
const exportTableWithImages = (data,datas) =>{
? ? exportByExcelJs(data,datas)
}
8.導(dǎo)出表格圖示
