Univer
Univer Sheet
Features
Import & Export

Import & Export

📊 Univer Sheet
🏆

This feature contains closed-source code, allowing any user to use it for free. It also includes an optional business upgrade plan that provides richer features and services.

💻

This feature depends on the Univer backend service. Please make sure you have read the related documentation and completed the deployment before using it.

We provide the ability to import and export Excel files through the server interface. Install this plugin to quickly access the import and export capabilities in Univer.

Currently only .xlsx format is supported.

Installation

pnpm add @univerjs-pro/sheets-exchange-client

Import

import '@univerjs-pro/sheets-exchange-client/lib/index.css';
 
import { UniverSheetsExchangeClientPlugin } from '@univerjs-pro/sheets-exchange-client';

Internationalization

import { LocaleType, Tools } from '@univerjs/core';
import SheetsExchangeClientEnUS from '@univerjs-pro/sheets-exchange-client/locale/en-US';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      SheetsExchangeClientEnUS
    ),
  },
});

Register

univer.registerPlugin(UniverSheetsExchangeClientPlugin);

Configuration

If the import/export interface has not changed, you do not need to configure it. If there are changes, you can configure the interface address as follows:

import { IConfigService } from '@univerjs/core'
import { EXCHANGE_UPLOAD_FILE_SERVER_URL_KEY, EXCHANGE_IMPORT_SERVER_URL_KEY, EXCHANGE_EXPORT_SERVER_URL_KEY, EXCHANGE_GET_TASK_SERVER_URL_KEY, EXCHANGE_SIGN_URL_SERVER_URL_KEY } from '@univerjs-pro/sheets-exchange-client';
 
const injector = univer.__getInjector();
const configService = injector.get(IConfigService);
configService.setConfig(EXCHANGE_UPLOAD_FILE_SERVER_URL_KEY, `http://localhost:3010/universer-api/stream/file/upload`);
configService.setConfig(EXCHANGE_IMPORT_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/{type}/import`);
configService.setConfig(EXCHANGE_EXPORT_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/{type}/export`);
configService.setConfig(EXCHANGE_GET_TASK_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/task/{taskID}`);
configService.setConfig(EXCHANGE_SIGN_URL_SERVER_URL_KEY, `http://localhost:3010/universer-api/file/{fileID}/sign-url`);

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/sheet/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/sheet/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/sheets-exchange-client. Ensure that @univerjs-pro/sheets-exchange-client is installed in the project before use.


Copyright © 2021-2024 DreamNum Co,Ltd. All Rights Reserved.