Custom Import Behavior

If the default document import behavior of Univer does not meet your needs, you can customize the import behavior using the Facade API.

Most of the time, you may want to hide the import entry provided by the plugin or directly display the successfully imported file in the current instance. Here are some code examples for reference.

Hide Import Entry

Preset Mode

UniverSheetsCorePreset({
  menu: {
    'sheets-exchange-client.operation.exchange': {
      hidden: true,
    },
  },
})

Plugin Mode

univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheets-exchange-client.operation.exchange': {
      hidden: true,
    },
  },
})

Preset Mode

UniverDocsCorePreset({
  menu: {
    'docs-exchange-client.operation.exchange': {
      hidden: true,
    },
  },
})

Plugin Mode

univer.registerPlugin(UniverDocsUIPlugin, {
  menu: {
    'docs-exchange-client.operation.exchange': {
      hidden: true,
    },
  },
})

You first need to obtain a File object, which you can usually get through file upload or by fetching from a URL. Here is an example code snippet that fetches a .xlsx file from a URL and converts it into a File object.

const url = 'https://example.com/filename.xlsx' // Your Excel file URL

// Function to fetch and convert the URL to a File object.
// Here, the fetch API is used to directly obtain the file,
// which may need to be modified according to the actual situation,
// such as file address authentication and cross-domain issues.
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.wordprocessingml.document' })
  } catch (error) {
    console.error('Failed to fetch the file:', error)
  }
}

// Fetch the file and import it as a snapshot
// If the URL file address is not authenticated,
// you can directly pass it to the importXLSXToSnapshotAsync or importXLSXToUnitIdAsync method
const file = await fetchExcelFile(url)

If you are using collaborative editing features, you can use the univerAPI.importXLSXToUnitIdAsync method to import the .xlsx file and obtain a unitId, then load the document using the univerAPI.loadServerUnit method.

import { UniverInstanceType } from '@univerjs/core'
// When using presets, you can import `UniverInstanceType` from `@univerjs/presets`
import { UniverInstanceType } from '@univerjs/presets'

univerAPI.importXLSXToUnitIdAsync(file).then((unitId) => {
  console.log('Unit ID created:', unitId)

  univerAPI.loadServerUnit(unitId, UniverInstanceType.UNIVER_DOC)
})

Or if you just want to import the .xlsx file as a snapshot (IDocumentData) and render it in the current instance, you can use the univerAPI.importXLSXToSnapshotAsync method.

// Modify the following code according to the actual situation
univerAPI.importXLSXToSnapshotAsync(file).then((snapshot) => {
  console.log('Snapshot created:', snapshot)
  // Create a new document with the snapshot
  univerAPI.createWorkbook(snapshot)
})

You first need to obtain a File object, which you can usually get through file upload or by fetching from a URL. Here is an example code snippet that fetches a .docx file from a URL and converts it into a File object.

const url = 'https://example.com/filename.docx' // Your Word file URL

// Function to fetch and convert the URL to a File object.
// Here, the fetch API is used to directly obtain the file,
// which may need to be modified according to the actual situation,
// such as file address authentication and cross-domain issues.
async function fetchWordFile(url) {
  try {
    const response = await fetch(url)
    const blob = await response.blob()
    return new File([blob], 'filename.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
  } catch (error) {
    console.error('Failed to fetch the file:', error)
  }
}

// Fetch the file and import it as a snapshot
// If the URL file address is not authenticated,
// you can directly pass it to the importDOCXToSnapshotAsync or importDOCXToUnitIdAsync method
const file = await fetchWordFile(url)

If you are using collaborative editing features, you can use the univerAPI.importDOCXToUnitIdAsync method to import the .docx file and obtain a unitId, then load the document using the univerAPI.loadServerUnit method.

import { UniverInstanceType } from '@univerjs/core'
// When using presets, you can import `UniverInstanceType` from `@univerjs/presets`
import { UniverInstanceType } from '@univerjs/presets'

univerAPI.importDOCXToUnitIdAsync(file).then((unitId) => {
  console.log('Unit ID created:', unitId)

  univerAPI.loadServerUnit(unitId, UniverInstanceType.UNIVER_DOC)
})

Or if you just want to import the .docx file as a snapshot (IDocumentData) and render it in the current instance, you can use the univerAPI.importDOCXToSnapshotAsync method.

// Modify the following code according to the actual situation
univerAPI.importDOCXToSnapshotAsync(file).then((snapshot) => {
  console.log('Snapshot created:', snapshot)
  // Create a new document with the snapshot
  univerAPI.createUniverDoc(snapshot)
})

Custom Import Behavior

Hide Import Entry

Import Document from URL

On this page