🎉 v0.5.0 is released. Read more →
GuidesUniver SheetsFeaturesImport & ExportPro

Import & Export

Facade APIPaid VersionUniver ServerUniver on Node.jsPreset
✅✅✅-UniverSheetsAdvancedPreset

Univer implements the import and export of Excel XLSX format files through plugins and backend services. The plugin integrates the ability to interact with the server and provides an import and export menu entry.

This feature includes the following plugin packages:

❓

Why does Univer implement import and export through backend services?

Importing and exporting implemented only through the frontend cannot meet enterprise requirements in terms of performance or effect. Therefore, we provide backend services to implement import and export features. You can use some open-source XLSX parsing libraries to parse files into data structures that conform to the IWorksheetData interface, and then import the data into Univer through the Facade API.

Presets Installation

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
import { UniverSheetsAdvancedPreset } from '@univerjs/presets/preset-sheets-advanced';
import UniverPresetSheetsAdvancedEnUS from '@univerjs/presets/preset-sheets-advanced/locales/en-US';
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    enUS: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsAdvancedEnUS,
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsAdvancedPreset({
      universerEndpoint: 'http://localhost:3010',
    }),
  ],
});

Advanced Installation

npm install @univerjs-pro/exchange-client @univerjs-pro/sheets-exchange-client
import { LocaleType, Tools } from '@univerjs/core';
import { UniverExchangeClientPlugin } from '@univerjs-pro/exchange-client';
import { UniverSheetsExchangeClientPlugin } from '@univerjs-pro/sheets-exchange-client';
import ExchangeClientEnUS from '@univerjs-pro/exchange-client/locale/en-US';
 
import '@univerjs-pro/exchange-client/lib/index.css';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      ExchangeClientEnUS
    ),
  },
});
 
const UNIVER_SERVER_ENDPOINT = `http://localhost:8000`;
univer.registerPlugin(UniverExchangeClientPlugin, {
  // Configurations below are for Univer Server, please modify them according to actual circumstances
  uploadFileServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/stream/file/upload`,
  importServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/exchange/{type}/import`,
  exportServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/exchange/{type}/export`,
  getTaskServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/exchange/task/{taskID}`,
  signUrlServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/file/{fileID}/sign-url`,
  downloadEndpointUrl: `${UNIVER_SERVER_ENDPOINT}/`
});
univer.registerPlugin(UniverSheetsExchangeClientPlugin);

Custom Usage

If you are not satisfied with the features provided by the plugin, you can also use the Facade API to implement custom import and export processes. Please refer to Server-Related Features for more details.

FAQ

How to Open or Edit an Excel File from a URL

Here is an implementation idea for your reference. First, use the browser’s fetch API to download the file from the URL and convert it into a File object. Then, call the importXLSXToUnitId or importXLSXToSnapshot methods from the Facade API to import it. The sample code is as follows:

const url = 'https://example.com/filename.xlsx'; // Your Excel file URL
 
// Function to fetch and convert the URL to a File object
async function fetchExcelFile(url) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    return new File([blob], 'filename.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  } catch (error) {
    console.error('Failed to fetch the file:', error);
  }
}
 
// Fetch the file and import it as a snapshot
fetchExcelFile(url).then(async file => {
  if (file) {
    // Modify the following code according to the actual situation
    univerAPI.importXLSXToSnapshot(file).then(snapshot => {
      console.log('Snapshot created:', snapshot); // see more: https://univer.ai/guides/sheets/getting-started/cell-data
    });
 
    univerAPI.importXLSXToUnitId(file).then(unitId => {
      console.log('Unit ID created:', unitId);
 
      // Utilize automatic data loading in conjunction with collaborative editing. https://univer.ai/guides/sheets/features/collaboration#automatically-load-data
      const url = new URL(window.location.href);
      const unit = url.searchParams.get('unit');
      url.searchParams.set('unit', unitID);
      url.searchParams.set('type', "2"); // The meaning of "2" is String(UniverInstanceType.UNIVER_SHEET)
      console.log('Unit URL:', url.toString());
    });
  }
});

Note: The Facade API univerAPI.importXLSXToSnapshot utilizes the functionality provided by @univerjs-pro/exchange-client. Ensure that @univerjs-pro/exchange-client is installed in the project before use.

The Import/Export API is not functioning properly

To ensure proper functioning of the Import/Export feature, you need to correctly configure the S3 settings in Univer Server. These configurations will be used for storing imported and exported files.

Read the Troubleshooting section for more information.

Pivot Table IntroductionCollaborative EditingPro