当前位置：首页 > news >正文

vue下的xlsx文件导出和导入的写法

news 来源：原创 2025/6/13 10:11:34

1.导出：

 <el-button class="add_box" @click="exportToExcel"><div><svg-icon icon-class="excel" style="font-size: 15px !important;vertical-align: text-top;"></svg-icon><p>导出</p></div></el-button>// 导出Excel表// 表格数据写入excel，并导出为Excel文件private async exportToExcel() {const XLSX = require('xlsx')// 使用 this.$nextTick 是在dom元素都渲染完成之后再执行this.$nextTick(function () {// 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析const xlsxParam = { raw: true }const wb = XLSX.utils.table_to_book(document.querySelector('#oIncomTable'), xlsxParam)// 导出excel文件名let fileName = `${this.$t('i18n.route_flometerInAreawatch')}` + new Date().getTime() + '.xlsx'const wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: true,type: 'array'})try {// 下载保存文件FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)} catch (e) {if (typeof console !== 'undefined') {console.log(e, wbout)}}return wbout})}

2.导入

//当前的代码是用于 导出 .xlsx 文件 的，想实现 导入 .xlsx 文件并解析数据 的功能1.在 strappingTable.vue 的 <template> 中添加一个隐藏的 <input type="file"> 控件：<input type="file" id="xlsxFileInput" accept=".xlsx, .xls" style="display: none" @change="handleImportExcel" />2.绑定“导入”按钮事件<el-button class="add_box" @click="$el.querySelector('#xlsxFileInput').click()"><div><svg-icon icon-class="example"></svg-icon><p>导入</p></div>
</el-button>3.编写 handleImportExcel 方法private async handleImportExcel(e: Event) {const XLSX = require('xlsx')const target = (e.target as HTMLInputElement)if (!target || !target.files || target.files.length === 0) {this.$message.warning('请选择一个 Excel 文件')return}const file = target.files[0]const reader = new FileReader()reader.onload = (event) => {try {const data = event.target?.resultconst workbook = XLSX.read(data, { type: 'array' })const sheetName = workbook.SheetNames[0]const worksheet = workbook.Sheets[sheetName]// 解析为 JSON 格式（自动匹配表头）const jsonData = XLSX.utils.sheet_to_json(worksheet)// 假设你要更新表格数据this.tableData = jsonData.map(item => ({height: item['高度'] || item.height,volume: item['容积'] || item.volume}))this.$message.success('导入成功')} catch (error) {console.error('导入失败:', error)this.$message.error('导入失败，请检查文件格式')}}reader.readAsArrayBuffer(file)
}