国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端vue導(dǎo)出excel(標(biāo)題加粗+表頭自定義樣式+表格邊框+單元格自定義樣式)

1年前作者：依米__分類：Toy博客閱讀(29)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了前端vue導(dǎo)出excel(標(biāo)題加粗+表頭自定義樣式+表格邊框+單元格自定義樣式)。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

接近過年，被一大堆excel報(bào)表煩死的我，遇到要求前端導(dǎo)出excel的后端，差點(diǎn)猝死的我拼命學(xué)習(xí)中，整理出這篇文章,希望看到這篇文章的你有所收獲，也希望能收到大佬們的指點(diǎn)

之前用c#，.net弄過導(dǎo)出word，excel，可以點(diǎn)擊查看.NET使用Aspose控件生成Word（可構(gòu)建自定義表格）、Excel這篇文章

話不多說，進(jìn)入正題，前端導(dǎo)出excel,使用插件 file-saver、xlsx、xlsx-style，xlsx-style 主要用來優(yōu)化excel的樣式

準(zhǔn)備

安裝插件 npm install file-saver xlsx xlsx-style --save

引入xlsx-style，發(fā)現(xiàn)導(dǎo)出樣式依然沒反應(yīng)。需要在\node_modules\xlsx-style\dist\cpexcel.js 807行的 var cpt = require(’./cpt’ + ‘a(chǎn)ble’); 改成var cpt = cptable;
但是如果每次打包之前去修改包里的代碼很麻煩,如果是多人合作，別人打包的適合也可能不知道直接打包了。所以我去node_modules包里直接修改了xlsx.full.min.js，然后吧文件復(fù)制到靜態(tài)文件夾中，在index.html頁面引入即可
vue excel 第二行加粗修改樣式,前端,vue.js,excel

vue excel 第二行加粗修改樣式,前端,vue.js,excel

這一步很重要，筆者就是在這個(gè)問題上耗費(fèi)了整整一下午，非常慘痛的代價(jià)

創(chuàng)建導(dǎo)出execl工具文件exportExecl.js

1.table數(shù)據(jù)導(dǎo)出execl文件

/**
 * table數(shù)據(jù)導(dǎo)出execl文件
 * @param {*} id:table元素id
 * @param {*} fileName :導(dǎo)出文件名稱
 */
function exportExecl(id, fileName, HEADERRANGE, TABLERANGE, REDRANGE = false) {
  let excelName = fileName||'導(dǎo)出表格.xlsx'
  var xlsxParam = { raw: false } // 導(dǎo)出數(shù)據(jù)是否未加工
  let tables=document.getElementById(id)
  if(!tables) return
  tables = document.getElementById(id).cloneNode(true)
  // 移除固定列，防止重復(fù)生成表格
  if (tables.querySelector('.el-table__fixed') !== null) {
    tables.removeChild(tables.querySelector('.el-table__fixed'))
  }
  let table_book = utils.table_to_book(tables, xlsxParam)
  table_book.Sheets.Sheet1 = setTitleClass(table_book.Sheets.Sheet1)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, HEADERRANGE, headerStyle)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, TABLERANGE, contentStyle)
  if (REDRANGE) {
    table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, REDRANGE, redFont)
  }
  table_book.Sheets.Sheet1 = addRangeBorder(table_book.Sheets.Sheet1['!merges'], table_book.Sheets.Sheet1) // 合并項(xiàng)添加邊框

  var table_write = XLSX.write(table_book, {
    bookSST: false,
    type: 'binary',
    bookType: 'xlsx'
  })
  try {
      FileSaver.saveAs(
        new Blob([s2ab(table_write)], { type: 'application/octet-stream' }),
        excelName
      )
  } catch (e) {
    console.log(e, table_write)
  }
  return table_write
}
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
}

2.為合并項(xiàng)添加邊框

// 為合并項(xiàng)添加邊框
function addRangeBorder(range, ws) {
  let arr = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z'
  ]
  if (range) {
    range.forEach((item) => {
      let startColNumber = Number(item.s.r),
        endColNumber = Number(item.e.r);
      let startRowNumber = Number(item.s.c),
        endRowNumber = Number(item.e.c);
      const test = ws[arr[startRowNumber] + (startColNumber + 1)];
      for (let col = startColNumber; col <= endColNumber; col++) {
        for (let row = startRowNumber; row <= endRowNumber; row++) {
          ws[arr[row] + (col + 1)] = test;
        }
      }
    });
  }
  return ws;
}

3.根據(jù)需求，我將樣式設(shè)置提出來作為單獨(dú)的方法. 可以根據(jù)自己的需求加工

const commonStyle = {
  font: { name: '宋體', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const titleStyle = {
  font: { name: '黑體', sz: 18, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const headerStyle = {
  font: { name: '黑體', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
  // fill: {
  //   fgColor: { rgb: 'ebebeb' }// 設(shè)置標(biāo)題單元格的背景顏色
  // }
}
const redFont = {
  font: { name: '宋體', sz: 11, bold: false,
    color: {
      rgb: 'FF0000' // 十六進(jìn)制，不帶#
    }
  },
  alignment: { horizontal: 'left', vertical: 'center', wrapText: false }
}

const contentStyle = {
  font: { name: '宋體', sz: 11, bold: false },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
}
// 設(shè)置 標(biāo)題及公共樣式
function setTitleClass(worksheet) {
  // title
  for (const key in worksheet) {
   if (key.indexOf('!') === -1 && worksheet[key].v) {
      if(key == 'A1'){ // title
        worksheet[key].s = titleStyle
      } else {
        worksheet[key].s = commonStyle
      }
   }
  }
  return worksheet
}
// 根據(jù)范圍和style設(shè)置單元格樣式
function setCellStyle(worksheet, range, RANGESTYLE) {
  const headerRange = utils.decode_range(range)
  for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
    for ( let row = headerRange.s.r; row <= headerRange.e.r; row++) {
      const headerCell = utils.encode_cell({ r: row, c: col })
      if( worksheet[headerCell] != undefined) {
        worksheet[headerCell].s = RANGESTYLE
      }
    }
  }
  return worksheet
}

在 xlsx-style 中，單元格樣式共有五個(gè)頂級的屬性，分別是：fill, font, numFmt, alignment 和 border。

頂級屬性	子屬性	描述	類型或可選值	默認(rèn)值
fill	patternType	填充模式	“solid” or “none”	-
	fgColor	前景色	COLOR_SPEC	-
	bgColor	背景色	COLOR_SPEC	{ indexed: 64}
font	name	字體名稱	string	“Calibri”
	sz	字體大小	number	12
	color	字體顏色	COLOR_SPEC	-
	bold	加粗	boolean	-
	underline	下劃線	boolean	-
	italic	斜體	boolean	-
	strike	瞄邊	boolean	-
	outline	輪廓	boolean	-
	shadow	陰影	boolean	-
	vertAlign	垂直對齊	boolean	-
numFmt	-	數(shù)字格式化	“0” // 內(nèi)置格式的整數(shù)索引 “0.00%” // 匹配內(nèi)置格式的字符串，見下文 “0.0%” // 格式化為自定義格式的字符串 “0.00%;(0.00%);-;@” // 格式化的時(shí)候轉(zhuǎn)義特殊字符 “m/dd/yy” // 格式化為日期	-
alignment	vertical	垂直對齊	“bottom”、“center”、“top”	-
	horizontal	水平對齊	“l(fā)eft”、“center”、“right”	-
	wrapText	換行	boolean	-
	readingOrder	文字方向	1、2 // for right-to-left	-
	textRotation	旋轉(zhuǎn)	Number from 0 to 180 or 255	0
border	top	上邊框	{ style: BORDER_STYLE, color: COLOR_SPEC }	-
	bottom	下邊框	{ style: BORDER_STYLE, color: COLOR_SPEC }	-
	left	左邊框	{ style: BORDER_STYLE, color: COLOR_SPEC }	-
	right	右邊框	{ style: BORDER_STYLE, color: COLOR_SPEC }	-
	diagonal	對角線	{ style: BORDER_STYLE, color: COLOR_SPEC }	-
	diagonalUp	上對角線	boolean	-
	diagonalDown	下對角線	boolean	-

exportExecl.js文件全代碼


import FileSaver from 'file-saver'
import { utils } from 'xlsx'

const commonStyle = {
  font: { name: '宋體', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const titleStyle = {
  font: { name: '黑體', sz: 18, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const headerStyle = {
  font: { name: '黑體', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
  // fill: {
  //   fgColor: { rgb: 'ebebeb' }// 設(shè)置標(biāo)題單元格的背景顏色
  // }
}

const contentStyle = {
  font: { name: '宋體', sz: 11, bold: false },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
}

const redFont = {
  font: { name: '宋體', sz: 11, bold: false,
    color: {
      rgb: 'FF0000' // 十六進(jìn)制，不帶#
    }
  },
  alignment: { horizontal: 'left', vertical: 'center', wrapText: false }
}

/**
 * table數(shù)據(jù)導(dǎo)出execl文件
 * @param {*} id:table元素id
 * @param {*} fileName :導(dǎo)出文件名稱
 */
function exportExecl(id, fileName, HEADERRANGE, TABLERANGE, REDRANGE = false) {
  let excelName = fileName||'導(dǎo)出表格.xlsx'
  var xlsxParam = { raw: false } // 導(dǎo)出數(shù)據(jù)是否未加工
  let tables=document.getElementById(id)
  if(!tables) return
  tables = document.getElementById(id).cloneNode(true)
  // 移除固定列，防止重復(fù)生成表格
  if (tables.querySelector('.el-table__fixed') !== null) {
    tables.removeChild(tables.querySelector('.el-table__fixed'))
  }
  let table_book = utils.table_to_book(tables, xlsxParam)
  table_book.Sheets.Sheet1 = setTitleClass(table_book.Sheets.Sheet1)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, HEADERRANGE, headerStyle)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, TABLERANGE, contentStyle)
  if (REDRANGE) {
    table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, REDRANGE, redFont)
  }
  table_book.Sheets.Sheet1 = addRangeBorder(table_book.Sheets.Sheet1['!merges'], table_book.Sheets.Sheet1) // 合并項(xiàng)添加邊框

  var table_write = XLSX.write(table_book, {
    bookSST: false,
    type: 'binary',
    bookType: 'xlsx'
  })
  try {
      FileSaver.saveAs(
        new Blob([s2ab(table_write)], { type: 'application/octet-stream' }),
        excelName
      )
  } catch (e) {
    console.log(e, table_write)
  }
  return table_write
}
function setCellStyle(worksheet, range, RANGESTYLE) {
  const headerRange = utils.decode_range(range)
  for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
    for ( let row = headerRange.s.r; row <= headerRange.e.r; row++) {
      const headerCell = utils.encode_cell({ r: row, c: col })
      if( worksheet[headerCell] != undefined) {
        worksheet[headerCell].s = RANGESTYLE
      }
    }
  }
  return worksheet
}

function setTitleClass(worksheet) {
  // title
  for (const key in worksheet) {
   if (key.indexOf('!') === -1 && worksheet[key].v) {
      if(key == 'A1'){ // title
        worksheet[key].s = titleStyle
      } else {
        worksheet[key].s = commonStyle
      }
   }
  }
  return worksheet
}

// 為合并項(xiàng)添加邊框
function addRangeBorder(range, ws) {
  let arr = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z'
  ]
  if (range) {
    range.forEach((item) => {
      let startColNumber = Number(item.s.r),
        endColNumber = Number(item.e.r);
      let startRowNumber = Number(item.s.c),
        endRowNumber = Number(item.e.c);
      const test = ws[arr[startRowNumber] + (startColNumber + 1)];
      for (let col = startColNumber; col <= endColNumber; col++) {
        for (let row = startRowNumber; row <= endRowNumber; row++) {
          ws[arr[row] + (col + 1)] = test;
        }
      }
    });
  }
  return ws;
}

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 default exportExecl

vue文件引入

由于頁面展示的excel五花八門，導(dǎo)出的excel又需要同客戶給的excel一致，這里就用了原生的表格。element的表格也是支持導(dǎo)出的

vue excel 第二行加粗修改樣式,前端,vue.js,excel

頁面展示
vue excel 第二行加粗修改樣式,前端,vue.js,excel
導(dǎo)出結(jié)果

目前導(dǎo)出還未實(shí)現(xiàn)自定義行高列寬，若有大佬有方案，歡迎留言指點(diǎn)，感謝文章來源地址http://www.zghlxwxcb.cn/news/detail-852050.html

到了這里，關(guān)于前端vue導(dǎo)出excel(標(biāo)題加粗+表頭自定義樣式+表格邊框+單元格自定義樣式)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

sheetJs / xlsx-js-style 純前端實(shí)現(xiàn)導(dǎo)出 excel 表格及自定義單元格樣式
xlsx 地址：https://www.npmjs.com/package/xlsx SheetJs 地址：https://docs.sheetjs.com/docs/ xlsx-js-style 地址：https://www.npmjs.com/package/xlsx-js-style !cols 設(shè)置列寬 cols 為一個(gè)對象數(shù)組，依次表示每一列的寬度 wpx 字段表示以像素為單位，wch 字段表示以字符為單位 hidden 如果為真，則隱藏該列 !rows 設(shè)
2024年02月06日
瀏覽(25)
vue3前端excel導(dǎo)出；組件表格，自定義表格導(dǎo)出；Vue3 + xlsx + xlsx-style
當(dāng)畫面有自定義的表格或者樣式過于復(fù)雜的表格時(shí)，導(dǎo)出功能可以由前端實(shí)現(xiàn) 1. 使用的插件： sheet.js-xlsx 文檔地址：https://docs.sheetjs.com/ 中文地址：https://geekdaxue.co/read/SheetJS-docs-zh/README.md xlsx-style：https://www.npmjs.com/package/xlsx-style 2. 安裝引用安裝插件-vue3 引用插件 3. 組件表格
2024年04月26日
瀏覽(30)
java 實(shí)現(xiàn) excel 自定義樣式和字段導(dǎo)出
?java 功能中，有一個(gè)功能是大家經(jīng)常做的，就是excel導(dǎo)出，簡單的excel導(dǎo)出可以直接用阿里的easyExcel添加注解自動(dòng)導(dǎo)出來某些固定字段就行了，這個(gè)是比較簡單的導(dǎo)出，本文就不作過多贅述 ?這篇文章主要是針對，某些頁面的導(dǎo)出，比如說按照頁面上的表格的樣式導(dǎo)出數(shù)據(jù)
2024年02月09日
瀏覽(23)
純前端 —— 200行JS代碼、實(shí)現(xiàn)導(dǎo)出Excel、支持DIY樣式，縱橫合并
前期回顧 Vue3 + TS + Element-Plus 封裝Tree組件《親測可用》_vue3+ts 組件封裝-CSDN博客 https://blog.csdn.net/m0_57904695/article/details/131664157?spm=1001.2014.3001.5501 目錄具體思路： 1. 準(zhǔn)備HTML結(jié)構(gòu) 2. 定義CSS樣式 3. 初始化表格數(shù)據(jù) 4. 創(chuàng)建表格函數(shù)createTable 5. 將表格添加到頁面中 6. 導(dǎo)出表格為E
2024年02月02日
瀏覽(17)
前端使用xlsx-js-style導(dǎo)出Excel文件并修飾單元格樣式
安裝導(dǎo)出 excel 較常見的 js 庫是之一是 xlsx， xlsx 算是基礎(chǔ)版本，不能對單元格進(jìn)行樣式（對齊方式、文字顏色、背景顏色等）的修飾，如果需要修飾單元格，可使用 xlsx-js-style 引入需要導(dǎo)出的數(shù)據(jù)源將數(shù)據(jù)源轉(zhuǎn)成需要的二維數(shù)組定義 Excel 表頭將定義好的表頭添加到 body
2023年04月08日
瀏覽(22)
vue 一鍵導(dǎo)出數(shù)據(jù)為excel文件并附帶樣式十分簡單
自入行以來我就一直疑惑一個(gè)問題，導(dǎo)出excel為什么總是搞的很復(fù)雜，包括網(wǎng)上的教程，屎里淘金，非常耗費(fèi)精力。今天剛好業(yè)務(wù)需要，整理一個(gè)簡單明了的由vue前端導(dǎo)出的版本出來。開始： # 1.添加xlsx、xlsx-style、file-saver三個(gè)包如果項(xiàng)目里已經(jīng)有了這三個(gè)包，那就不用再執(zhí)
2024年02月06日
瀏覽(21)
前端Vue自定義等寬標(biāo)簽欄標(biāo)題欄選項(xiàng)卡
前端組件化開發(fā)：以cc-chooseTab組件為例隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來越高。傳統(tǒng)開發(fā)方式將一個(gè)系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動(dòng)全身。為了解決這個(gè)問題，前端開發(fā)社區(qū)提
2024年02月11日
瀏覽(25)
hutool 導(dǎo)出復(fù)雜表頭excel
假如已這樣的表頭導(dǎo)出數(shù)據(jù) ?1.把包含表頭的excel添加到項(xiàng)目資源目錄 ?2.編寫代碼讀取表頭所在sheet,并且加入需導(dǎo)出的數(shù)據(jù)
2024年02月13日
瀏覽(19)
Vue前端表格導(dǎo)出Excel文件
分享一個(gè)Vue前端導(dǎo)出Excel文件的方法。記錄學(xué)習(xí)！功能需求：將表格的全部數(shù)據(jù)導(dǎo)出Excel格式的文件前端：Vue3+Element-Plus 這個(gè)導(dǎo)出方法全部為前端操作，后端只需要傳入表格數(shù)據(jù)到前端即可（基礎(chǔ)的多表查詢，用的內(nèi)連接） 2.1 核心方法將這個(gè)導(dǎo)出方法單獨(dú)封裝出來，帶一
2023年04月24日
瀏覽(24)
POI實(shí)現(xiàn)Excel多行復(fù)雜表頭導(dǎo)出
1. 定義表頭標(biāo)題 2. 編寫導(dǎo)出/生成Excel工具類 3. 測試測試結(jié)果
2024年01月19日
瀏覽(32)