工具类可以直接复制稍微修改进行使用，使用方法参考使用示例，基础的文件导入可以参考参考链接。
- 使用：
import TableImport from './TableImport'
import TableModelExport from './TableModelExport'
import TableModelExportCSV from './TableModelExportCSV'
handleImportFromExcelData = (data = []) => {
}
render() {
const propsTableImport = {
handleImportFromExcelData:this.handleImportFromExcelData
}
const columns = [
{label:'姓名'},
{label:'单位'},
]
const propsTableModelExport = {
modelName:'模板名称',
columns:columns
}
return (
)
}
- 工具类
导入Excel、CSV文件内容：
TableImport.js
import React, { Component } from 'react'
import { Button, Input, message } from 'components'
import uuid from '~/utils/uuid'
export default class TableImport extends Component {
state = {
fileId: uuid()
}
handleImport = () => {
document.getElementById(this.state.fileId).click()
}
onChangeInputFile = (e) => {
var files = e.target.files
if (files.length == 0) return
var f = files[0]
if (!(/\.xlsx$/g.test(f.name) || /\.csv$/g.test(f.name))) {
message.error('仅支持读取xlsx或csv格式！')
return
}
this.readWorkbookFromLocalFile(f, this.readWorkbook)
}
// 读取本地excel文件
readWorkbookFromLocalFile = (file, callback) => {
const reader = new FileReader()
reader.onload = function(e) {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'binary' })
if (callback) callback(workbook)
}
reader.readAsBinaryString(file)
}
readWorkbook = (workbook) => {
var sheetNames = workbook.SheetNames // 工作表名称集合
var worksheet = workbook.Sheets[sheetNames[0]] // 这里我们只读取第一张sheet
var csv = XLSX.utils.sheet_to_csv(worksheet)
window.csv = csv
const data = this.csvToArray(csv)
this.props.handleImportFromExcelData(data)
}
csvToArray = (csv) => {
const rows = csv.split('\n')
rows.pop() // 最后一行没用的
const keys = rows[0].split(',')
const arr = []
for (let i = 1; i < rows.length; i++) {
const item = rows[i]
const values = item.split(',')
const arrItem = {
}
keys.map((key, index) => {
arrItem[key] = values[index]
})
arr.push(arrItem)
}
// const data = [
// {
// 源系统名称: '源系统名称',
// 源IP地址: '10.10.10.10',
// 源端口: '8080',
// 目的系统名称: '目的系统名称',
// 目的IP地址: '10.10.10.10',
// 目的端口: '8080',
// 访问协议: 'TCP',
// 访问操作: '放行'
// },
// {
// 源系统名称: '源系统名称',
// 源IP地址: '10.10.10.10',
// 源端口: '8080',
// 目的系统名称: '目的系统名称',
// 目的IP地址: '10.10.10.10',
// 目的端口: '8080',
// 访问协议: 'UDP',
// 访问操作: '阻断'
// }
// ]
return arr
}
render() {
return (
)
}
}
导出Excel文件：
TableModelExport.js
import React, { Component } from 'react'
import { Button, Input, message } from 'components'
export default class TableModelExport extends Component {
handleExport = () => {
var csv = '姓名,单位,手机号,可访问资源,VPN账号\n'
csv = this.props.columns.map((item, i) => {
return item.label
})
csv.join(',')
csv = csv + '\n'
this.exportExcel(csv)
}
exportExcel = (csv) => {
const sheet = this.csv2sheet(csv)
const blob = this.sheet2blob(sheet)
this.openDownloadDialog(blob, `${this.props.modelName}模板.xlsx`)
}
// csv转sheet对象
csv2sheet=(csv) => {
const sheet = {} // 将要生成的sheet
csv = csv.split('\n')
csv.forEach(function(row, i) {
row = row.split(',')
if (i == 0) sheet['!ref'] = 'A1:' + String.fromCharCode(65 + row.length - 1) + (csv.length - 1)
row.forEach(function(col, j) {
sheet[String.fromCharCode(65 + j) + (i + 1)] = { v: col }
})
})
return sheet
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
sheet2blob = (sheet, sheetName) => {
sheetName = sheetName || 'sheet1'
const workbook = {
SheetNames: [sheetName],
Sheets: {}
}
workbook.Sheets[sheetName] = sheet
// 生成excel的配置项
const wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
}
const wbout = XLSX.write(workbook, wopts)
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
// 字符串转ArrayBuffer
function s2ab(s) {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf)
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
return buf
}
return blob
}
/**
* 通用的打开下载对话框方法，没有测试过具体兼容性
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保存文件名，可选
*/
openDownloadDialog = (url, saveName) => {
if (typeof url === 'object' && url instanceof Blob) {
url = URL.createObjectURL(url) // 创建blob地址
}
const aLink = document.createElement('a')
aLink.href = url
aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event
if (window.MouseEvent) event = new MouseEvent('click')
else {
event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
}
aLink.dispatchEvent(event)
}
render() {
return (
)
}
}
导出CSV文件：
TableModelExportCSV.js
import React, { Component } from 'react'
import { Button, Input, message } from 'components'
export default class TableModelExportCSV extends Component {
handleExport = () => {
var csv = '姓名,单位,手机号,可访问资源,VPN账号\n'
csv = this.props.columns.map((item, i) => {
return item.label
})
csv.join(',')
csv = csv + '\n'
this.exportCSV(csv)
}
exportCSV = (data = '') => {
// 两个表数组转成字符串合并
const merged = data
// console.log(JSON.stringify(merged));//打印结果
// ## 导出操作
// encodeURIComponent解决中文乱码
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged)
// 通过创建a标签实现
const link = document.createElement('a')
link.href = uri
// 对下载的文件命名
link.download = `${this.props.modelName}模板.csv`
document.body.appendChild(link)
link.click()
}
render() {
return (
)
}
}
参考：
读取Excel、导出Excel、读取CSV：
https://www.cnblogs.com/liuxianan/p/js-excel.html
导出CSV：
https://blog.csdn.net/weixin_41628411/article/details/106280073