使用vue框架,使用exceljs插件,并将exceljs的每个方法封装成便于调用的工具库
时间: 2024-03-12 19:49:55 浏览: 111
好的,我可以帮你解答这个问题。为了方便使用exceljs插件,我们可以将其每个方法封装成便于调用的工具库。具体实现方法如下:
1. 安装exceljs插件
```bash
npm install exceljs --save
```
2. 创建一个util文件夹,并在其中创建一个excel.js文件
```javascript
import Excel from 'exceljs'
export default {
/**
* 读取Excel文件内容
* @param {File} file Excel文件
* @param {Number} sheetIndex Sheet索引,默认为1
* @param {Boolean} hasHeader 是否包含表头,默认为true
* @returns {Array} Excel数据
*/
async readExcel(file, sheetIndex = 1, hasHeader = true) {
const workbook = new Excel.Workbook()
await workbook.xlsx.load(file)
const worksheet = workbook.getWorksheet(sheetIndex)
const data = []
worksheet.eachRow((row, rowNumber) => {
if (hasHeader && rowNumber === 1) {
return
}
data.push(row.values)
})
return data
},
/**
* 写入Excel文件内容并下载
* @param {Array} data Excel数据
* @param {String} filename 文件名称,默认为data.xlsx
* @param {String} sheetname Sheet名称,默认为Sheet1
*/
async writeExcel(data, filename = 'data.xlsx', sheetname = 'Sheet1') {
const workbook = new Excel.Workbook()
const worksheet = workbook.addWorksheet(sheetname)
data.forEach((row) => {
worksheet.addRow(row)
})
const buffer = await workbook.xlsx.writeBuffer()
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = filename
link.click()
},
/**
* 读取Excel文件中的某个单元格的值
* @param {File} file Excel文件
* @param {Number} sheetIndex Sheet索引,默认为1
* @param {String} cellRef 单元格名称,例如A1
* @returns {String} 单元格的值
*/
async readCellValue(file, sheetIndex = 1, cellRef) {
const workbook = new Excel.Workbook()
await workbook.xlsx.load(file)
const worksheet = workbook.getWorksheet(sheetIndex)
const cell = worksheet.getCell(cellRef)
return cell.value
},
/**
* 写入Excel文件中的某个单元格的值
* @param {File} file Excel文件
* @param {Number} sheetIndex Sheet索引,默认为1
* @param {String} cellRef 单元格名称,例如A1
* @param {String} value 单元格的值
*/
async writeCellValue(file, sheetIndex = 1, cellRef, value) {
const workbook = new Excel.Workbook()
await workbook.xlsx.load(file)
const worksheet = workbook.getWorksheet(sheetIndex)
const cell = worksheet.getCell(cellRef)
cell.value = value
await workbook.xlsx.writeFile(file)
}
}
```
以上代码中,我们封装了四个方法:readExcel、writeExcel、readCellValue和writeCellValue。这些方法分别用于读取Excel文件内容、将数据写入Excel文件并下载、读取Excel文件中的某个单元格的值以及写入Excel文件中的某个单元格的值。
3. 在需要使用Excel工具库的组件中引入excel.js并使用
```javascript
import excel from '@/util/excel'
export default {
methods: {
async handleReadExcel(file) {
const data = await excel.readExcel(file)
console.log(data)
},
async handleWriteExcel() {
const data = [
['姓名', '年龄'],
['张三', 18],
['李四', 20]
]
await excel.writeExcel(data, 'test.xlsx', 'Sheet1')
},
async handleReadCellValue(file) {
const value = await excel.readCellValue(file, 1, 'A1')
console.log(value)
},
async handleWriteCellValue(file) {
await excel.writeCellValue(file, 1, 'A1', 'Hello World')
}
}
}
```
以上代码中,我们在组件中引入了excel.js,并使用它的四个方法。例如,在handleReadExcel方法中,我们调用了readExcel方法来读取Excel文件内容,并将结果打印在控制台中。
希望这个回答能够帮助到你。
阅读全文