vue2结合V13..0.0实现读取本地slsx文件直接渲染（不点导入）

收藏

//导入
importExcel() {
   this.$refs.fileInput.click()
},
// 处理文件选择
handleFileChange(e) {
   console.log(e,'HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH');
   const files = e.target.files
   if (files.length === 0) return

   const file = files[0]
   if (!/\.(xlsx|xls)$/.test(file.name)) {
      this.$message.error('请上传Excel文件')
      return
   }
   console.log(file,'filefilefilefilefilefilefilefilefilefilefilefilefilefilefilefile');
   this.readFile(file)
   // 清空输入，以便可以重复选择同一文件
   e.target.value = ''
},
// 读取文件内容
readFile(file) {
   const reader = new FileReader()
   reader.onload = (e) => {
      console.log(e,'CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC');
      try {
      // 尝试使用 IO 属性（如果存在）
      const ExcelIOInstance = ExcelIO.IO || ExcelIO
      const excelIO = new ExcelIOInstance()
      excelIO.open(
         e.target.result,
         (json) => {
            console.log(json,'XXXXXXXXXXXXXXXXXXXXXXXXXXXX');
            this.loadSpreadData(json)
            this.$message.success('导入成功')
         },
         (error) => {
            console.error('导入过程中发生错误:', error)
            this.$message.error('导入过程中发生错误')
         },
      )
      } catch (error) {
      console.error('导入过程中发生错误:', error)
      this.$message.error('导入过程中发生错误')
      }
   }
   reader.readAsArrayBuffer(file)
},

导入默认的一个文件无需点击选择

Wilson.Zhang · Wilson.Zhang

您好！上述代码并不完整，缺少loadSpreadData，不了解这里做了什么，所以请问下您遇到的具体问题是什么？

整体看上述代码片段，无法推测问题和原因。参考您的代码片段，我将默认文件放置于vue工程的public目录下，在Workbook初始化时加载该文件通过spread-excelio可正常导入，如下图所示是测试使用的代码片段：

清风丶琉璃 · 清风丶琉璃

Wilson.Zhang 发表于 2025-10-27 17:07
您好！上述代码并不完整，缺少loadSpreadData，不了解这里做了什么，所以请问下您遇到的具体问题是什么？
...

如果我是接口返回的数据呢，怎么直接渲染到这个模板上？

Wilson.Zhang · Wilson.Zhang

清风丶琉璃发表于 2025-10-30 15:54
如果我是接口返回的数据呢，怎么直接渲染到这个模板上？

按照您提供的代码片段来看，接口返回的是通过文件选择器上传的文件吗？如果是的话，那这个文件就是File对象，可以直接将这个File对象传递给excelio的open方法打开。

如果不是的话，请问下您接口返回的数据是什么？可以提供一个能够复现这个现象的demo，帮您分析下。

清风丶琉璃 · 清风丶琉璃

Wilson.Zhang 发表于 2025-10-30 17:34
按照您提供的代码片段来看，接口返回的是通过文件选择器上传的文件吗？如果是的话，那这个文件就是File对 ...

我现在用的是你发的这串代码，但是我的数据是接口返回的，要求是接口中的数据渲染到我本地自动显示的模板上[{
"id": "19114",
"createBy": null,
"createTime": "2025-10-30 10:08:07",
"updateBy": null,
"updateTime": null,
"sysOrgCode": null,
"reportId": "b11128c",
"orgCode": "1",
"projectCode": "11",
"projectName": "一、营业收入",
"rowNum": null,
"unit": "万元",
"projectPcode": null,
"isStandard": "1",
"isCompute": null,
"isEdit": null,
"sn": 10,
"functionScope": null,
"promiseProjectCode": null,
"calcFormula": null,
"twoYearsAgoUnit": null,
"twoYearsAgoMoney": null,
"oneYearsAgoUnit": null,
"oneYearsAgoMoney": 0,
"thisYearActualUnit": null,
"thisYearActualMoney": null,
"thisYearBudgetUnit": null,
"thisYearBudgetMoney": 0,
"threeYearsAvgUnit": null,
"threeYearsAvgMoney": 0,
"nextYearBudgetUnit": null,
"nextYearBudgetMoney": 0,
"a": null,
"b": null,
"c": null,
"d": 0,
"e": null,
"f": null,
"g": null,
"h": "Q01_2200000000",
"j": "R/J*100",
"k": "S/K*100",
"l": "N-J",
"v": "O-K",
"b": null,
"n": null
},{
"id": "19114",
"createBy": null,
"createTime": "2025-10-30 10:08:07",
"updateBy": null,
"updateTime": null,
"sysOrgCode": null,
"reportId": "b11128c",
"orgCode": "1",
"projectCode": "11",
"projectName": "一、营业收入",
"rowNum": null,
"unit": "万元",
"projectPcode": null,
"isStandard": "1",
"isCompute": null,
"isEdit": null,
"sn": 10,
"functionScope": null,
"promiseProjectCode": null,
"calcFormula": null,
"twoYearsAgoUnit": null,
"twoYearsAgoMoney": null,
"oneYearsAgoUnit": null,
"oneYearsAgoMoney": 0,
"thisYearActualUnit": null,
"thisYearActualMoney": null,
"thisYearBudgetUnit": null,
"thisYearBudgetMoney": 0,
"threeYearsAvgUnit": null,
"threeYearsAvgMoney": 0,
"nextYearBudgetUnit": null,
"nextYearBudgetMoney": 0,
"a": null,
"b": null,
"c": null,
"d": 0,
"e": null,
"f": null,
"g": null,
"h": "Q01_2200000000",
"j": "R/J*100",
"k": "S/K*100",
"l": "N-J",
"v": "O-K",
"b": null,
"n": null
},{
"id": "19114",
"createBy": null,
"createTime": "2025-10-30 10:08:07",
"updateBy": null,
"updateTime": null,
"sysOrgCode": null,
"reportId": "b11128c",
"orgCode": "1",
"projectCode": "11",
"projectName": "一、营业收入",
"rowNum": null,
"unit": "万元",
"projectPcode": null,
"isStandard": "1",
"isCompute": null,
"isEdit": null,
"sn": 10,
"functionScope": null,
"promiseProjectCode": null,
"calcFormula": null,
"twoYearsAgoUnit": null,
"twoYearsAgoMoney": null,
"oneYearsAgoUnit": null,
"oneYearsAgoMoney": 0,
"thisYearActualUnit": null,
"thisYearActualMoney": null,
"thisYearBudgetUnit": null,
"thisYearBudgetMoney": 0,
"threeYearsAvgUnit": null,
"threeYearsAvgMoney": 0,
"nextYearBudgetUnit": null,
"nextYearBudgetMoney": 0,
"a": null,
"b": null,
"c": null,
"d": 0,
"e": null,
"f": null,
"g": null,
"h": "Q01_2200000000",
"j": "R/J*100",
"k": "S/K*100",
"l": "N-J",
"v": "O-K",
"b": null,
"n": null
},{
"id": "19114",
"createBy": null,
"createTime": "2025-10-30 10:08:07",
"updateBy": null,
"updateTime": null,
"sysOrgCode": null,
"reportId": "b11128c",
"orgCode": "1",
"projectCode": "11",
"projectName": "一、营业收入",
"rowNum": null,
"unit": "万元",
"projectPcode": null,
"isStandard": "1",
"isCompute": null,
"isEdit": null,
"sn": 10,
"functionScope": null,
"promiseProjectCode": null,
"calcFormula": null,
"twoYearsAgoUnit": null,
"twoYearsAgoMoney": null,
"oneYearsAgoUnit": null,
"oneYearsAgoMoney": 0,
"thisYearActualUnit": null,
"thisYearActualMoney": null,
"thisYearBudgetUnit": null,
"thisYearBudgetMoney": 0,
"threeYearsAvgUnit": null,
"threeYearsAvgMoney": 0,
"nextYearBudgetUnit": null,
"nextYearBudgetMoney": 0,
"a": null,
"b": null,
"c": null,
"d": 0,
"e": null,
"f": null,
"g": null,
"h": "Q01_2200000000",
"j": "R/J*100",
"k": "S/K*100",
"l": "N-J",
"v": "O-K",
"b": null,
"n": null
}]接口返回的这种数组对象

Wilson.Zhang · Wilson.Zhang

清风丶琉璃发表于 2025-10-31 09:18
我现在用的是你发的这串代码，但是我的数据是接口返回的，要求是接口中的数据渲染到我本地自动显示的模板 ...

这些数据看起来并不像是SpreadJS能直接反序列化的JSON数据，应该是和您业务相关的数据吧？

如果是业务相关的数据，在接收到这些数据后，需要自行填充逻辑将其中的数据填充到指定的单元格中。由于不了解您的实际业务和这些数据的实际含义，不好给出针对性的方案，您是否方便会议沟通下。

清风丶琉璃 · 清风丶琉璃

Wilson.Zhang 发表于 2025-10-31 11:22
这些数据看起来并不像是SpreadJS能直接反序列化的JSON数据，应该是和您业务相关的数据吧？

如果是业务 ...

方便，15175379751我微信你加我我给你发会议号？

Wilson.Zhang · Wilson.Zhang

清风丶琉璃发表于 2025-11-4 10:32
方便，15175379751我微信你加我我给你发会议号？

我创建了一个线上会议，请您参会沟通：561-914-759。

清风丶琉璃 · 清风丶琉璃

Wilson.Zhang 发表于 2025-11-4 11:06
我创建了一个线上会议，请您参会沟通：561-914-759。

readWithFromJson(data, spread) {
   const file = new File([data], 'temp.xlsx', {
      type:
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   })
   const reader = new FileReader()
   reader.onload = (e) => {
      var io = new ExcelIO.IO()
      io.open(
      e.target.result,
      (json) => {
         // 在 fromJSON 完成后执行
         spread.fromJSON(json)
         const sheet = spread.getActiveSheet() // 获取当前工作表
         const products = this.getProducts(this.dataSource.length) // 假设 getProducts 是你的数据方法
         sheet.setDataSource(products) // 设置数据源
         // // 7. 调整列宽
         sheet.setColumnWidth(0, 120)
         sheet.setRowHeight(0, 60)
         sheet.setColumnWidth(0, 400)
         sheet.setColumnWidth(20, 500)
         for (let i = 2; i < this.columnCount - 1; i++) {
            sheet.setColumnWidth(i, 180)
         }
      },
      (error) => {
         console.log('导入失败', error)
      },
      )
   }
   reader.readAsArrayBuffer(file)
},
如何跳过前4行从第4行开始渲染
前四行保留表格本身的显示

Wilson.Zhang · Wilson.Zhang

清风丶琉璃发表于 2025-11-4 14:50
readWithFromJson(data, spread) {
const file = new File([data], 'temp.xlsx', {
typ ...

您现在使用的数据绑定方式是表单绑定还是Table绑定？

		自动登录	找回密码
密码			立即注册

[处理中] vue2结合V13..0.0实现读取本地slsx文件直接渲染（不点导入）

9 个回复

本帖子中包含更多资源