dream-num / univer

Univer is an open-source alternative to Google Sheets, Slides, and Docs
https://univer.ai
Apache License 2.0
5.68k stars 469 forks source link

[Bug] Error: Missing `paragraphs` or `sectionBreaks` fields, or doesn't correspond to the location in `dataStream`. #2647

Closed FrontToEnd closed 1 day ago

FrontToEnd commented 2 days ago

Before you submit this issue, have you checked the following

Affected packages and versions

0.1.17

Reproduction link

core code:

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import LuckyExcel from 'luckyexcel'

const inputFile = ref(null)

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { LocaleType, Tools, Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import { FUniver } from "@univerjs/facade";
import DesignZhCN from '@univerjs/design/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';

import { luckyToUniver } from "./core/lucky-to-univer";

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
        SheetsZhCN,
        DocsUIZhCN,
        SheetsUIZhCN,
        UIZhCN,
        DesignZhCN,
    ),
  },
});

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);

univer.registerPlugin(UniverUIPlugin, {
  container: 'app1',
  header: false,
  contextMenu: false,
});

univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);

univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);

const univerAPI = FUniver.newAPI(univer);

const workbookId = 'workbook-01';
const sheetId = 'sheet-02';

class AbortCommandError extends Error {
  constructor() {
    super();
    this.name = 'AbortCommandError';
  }
}

const errListener = (e) => {
  const error = e instanceof PromiseRejectionEvent ? e.reason : e.error
  if (error instanceof AbortCommandError) {
    e.preventDefault();
  }
}
window.addEventListener('error', errListener);
window.addEventListener('unhandledrejection', errListener);

// 允许执行的命令
const allowCommands = [
  'sheet.operation.set-worksheet-active', // 设置工作表激活
  'sheet.command.set-scroll-relative', // 设置滚动位置
  'sheet.operation.set-scroll', // 设置滚动位置
  'sheet.command.set-zoom-ratio', // 设置缩放比例
  'sheet.operation.set-zoom-ratio', // 设置缩放比例
];

// 注册监听器
const disposable = univerAPI.onBeforeCommandExecute((command) => {
  // 在命令执行前执行自定义逻辑
  const { id, params, type } = command;
  if (!allowCommands.includes(id)) {
    throw new AbortCommandError();
  }
})

const handleUpload = () => {
  inputFile.value.click();
}

const handleChange = async (e) => {
  const file = e.target.files[0];

  // 得到xlsx文件后
  LuckyExcel.transformExcelToLucky(
      file,
      function(exportJson){
        // 转换后获取工作表数据

        console.log(exportJson.sheets)
        window.luckysheet.create({
          container: 'app1', //luckysheet is the container id
          showinfobar: false,
          data: exportJson.sheets,
          title: exportJson.info.name,
          userInfo: exportJson.info.name.creator,
          hook: {
            workbookCreateAfter: function(){
              const univerData = luckyToUniver({ data: exportJson.sheets });
              univer.createUnit(UniverInstanceType.UNIVER_SHEET, univerData);
            },
          }
        });
      },
      function(error){
        // 如果抛出任何错误,则处理错误
      }
  )
}

onBeforeUnmount(() => {
  disposable.dispose();
  window.removeEventListener('error', errListener);
  window.removeEventListener('unhandledrejection', errListener);
})

</script>

<template>
  <div class="wrapper">
    <div id="app1"></div>
    <button class="btn import_btn" @click="handleUpload">上传</button>
    <input type="file" ref="inputFile" @change="handleChange" v-show="false" />
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
}

#app1 {
  width: 90vw;
  height: 100vh;
}

.import_btn {
  width: 80px;
  margin-left: auto;
}
</style>

xlsx file

demo.xlsx

Expected behavior

Properly render the content of Excel

Actual behavior

Incorrectly render the content of Excel, error info: image

System information

No response

univer-bot[bot] commented 2 days ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Origin Title: [Bug] Error: Missing paragraphs or sectionBreaks fields, or doesn't correspond to the location in dataStream.

Title: [Bug] Error: Missing paragraphs or sectionBreaks fields, or doesn't correspond to the location in dataStream.


Before you submit this issue, have you checked the following

Affected packages and versions

0.1.17

Reproduction link

core code:

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import LuckyExcel from 'luckyexcel'

const inputFile = ref(null)

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { LocaleType, Tools, Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import { FUniver } from "@univerjs/facade";
import DesignZhCN from '@univerjs/design/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';

import { luckyToUniver } from "./core/lucky-to-univer";

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
        SheetsZhCN,
        DocsUIZhCN,
        SheetsUIZhCN,
        UIZhCN,
        DesignZhCN,
    ),
  },
});

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);

univer.registerPlugin(UniverUIPlugin, {
  container: 'app1',
  header: false,
  contextMenu: false,
});

univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);

univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);

const univerAPI = FUniver.newAPI(univer);

const workbookId = 'workbook-01';
const sheetId = 'sheet-02';

class AbortCommandError extends Error {
  constructor() {
    super();
    this.name = 'AbortCommandError';
  }
}

const errListener = (e) => {
  const error = e instanceof PromiseRejectionEvent ? e.reason : e.error
  if (error instanceof AbortCommandError) {
    e.preventDefault();
  }
}
window.addEventListener('error', errListener);
window.addEventListener('unhandledrejection', errListener);

// 允许执行的命令
const allowCommands = [
  'sheet.operation.set-worksheet-active', // 设置工作表激活
  'sheet.command.set-scroll-relative', // 设置滚动位置
  'sheet.operation.set-scroll', // 设置滚动位置
  'sheet.command.set-zoom-ratio', // 设置缩放比例
  'sheet.operation.set-zoom-ratio', // 设置缩放比例
];

// 注册监听器
const disposable = univerAPI.onBeforeCommandExecute((command) => {
  // 在命令执行前执行自定义逻辑
  const { id, params, type } = command;
  if (!allowCommands.includes(id)) {
    throw new AbortCommandError();
  }
})

const handleUpload = () => {
  inputFile.value.click();
}

const handleChange = async (e) => {
  const file = e.target.files[0];

  // 得到xlsx文件后
  LuckyExcel.transformExcelToLucky(
      file,
      function(exportJson){
        // 转换后获取工作表数据

        console.log(exportJson.sheets)
        window.luckysheet.create({
          container: 'app1', //luckysheet is the container id
          showinfobar: false,
          data: exportJson.sheets,
          title: exportJson.info.name,
          userInfo: exportJson.info.name.creator,
          hook: {
            workbookCreateAfter: function(){
              const univerData = luckyToUniver({ data: exportJson.sheets });
              univer.createUnit(UniverInstanceType.UNIVER_SHEET, univerData);
            },
          }
        });
      },
      function(error){
        // 如果抛出任何错误,则处理错误
      }
  )
}

onBeforeUnmount(() => {
  disposable.dispose();
  window.removeEventListener('error', errListener);
  window.removeEventListener('unhandledrejection', errListener);
})

</script>

<template>
  <div class="wrapper">
    <div id="app1"></div>
    <button class="btn import_btn" @click="handleUpload">上传</button>
    <input type="file" ref="inputFile" @change="handleChange" v-show="false" />
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
}

#app1 {
  width: 90vw;
  height: 100vh;
}

.import_btn {
  width: 80px;
  margin-left: auto;
}
</style>

xlsx file

demo.xlsx

Expected behavior

Properly render the content of Excel

Actual behavior

Incorrectly render the content of Excel, error info: image

System information

No response

FrontToEnd commented 2 days ago

luckyToUniver function from here: https://univer.ai/zh-CN/playground?title=Migrate%20Luckysheet

Dushusir commented 1 day ago

The problem was with luckyToUniver and has been fixed