Introduction

The copied and exported content can be directly displayed in Excel, and S2 has completed the format compatibility.

copy

This function can quickly copy the content of the table to the clipboard @antv/s2 core layer provides a basic copy function, which can be enabled by configuring enableCopy

full copy

The export component of S2 provides copying of original data and copying of formatted data respectively.

• Full copy of original data

• Full copy of formatted data

local copy

Use the shortcut key command/ctrl + c to copy the selected area (partial copy)

const s2Options = {
  interaction: {
    // 是否开启复制
    copy: { enable: true },
    // 复制格式化后的数据 (s2DataConfig.meta 中配置的 formatter)
    withFormat: false,
    // 复制数值时是否携带所对应的行列头维值
    withHeader: true,
    // 圈选复制前，需要开启圈选功能
    brushSelection: {
      dataCell: true, // 圈选数值单元格 （默认开启）
      rowCell: true,  // 圈选行头单元格
      colCell: true,  // 圈选列头单元格
    }
  }
};

• copy to excel

• Copy with HTML format

复制粘贴到富文本编辑器中 （带 HTML 格式）

• Copy header content

• Copy column header content

• CopyWithHeader withHeader : whether to copy data with header information, the default is false

const s2Options = {
  interaction: {
    copy: { enable: true },
    withHeader: true,
  }
};

复制格式化后的数据

withFormat: 当 S2DataConfig 的 meta 中配置了 自定义格式函数时, 是否按照 formatter 复制数据

const s2DataConfig = {
  fields: { ... }
  meta: [
    {
      field: 'city',
      name: '城市',
      formatter: (value) => `${value}-xx`
    }
  ]
}

const s2Options = {
  interaction: {
    copy: { enable: true },
    withFormat: true,
  }
};

export

@antv/s2-react component layer provides export function

import { SheetComponent } from '@antv/s2-react'

<SheetComponent
  dataCfg={dataCfg}
  options={options}
  header={{
    export: {
      open: true
    }
  }}
/>

Click the copy or download button to export the full amount of data (full amount copy)

original export method

Functions such as copying and exporting of the component layer are encapsulated based on a series of tools and methods exposed by the core layer @antv/s2 , which can be self-encapsulated based on tools and methods according to actual business

import { copyData, copyToClipboard, download } from '@antv/s2'

// 拿到复制数据
const data = copyData(spreadsheet, '\t', false)

// 复制数据到剪贴板
// 同步复制：copyToClipboard(data, false)
copyToClipboard(data)
  .then(() => {
    console.log('复制成功')
  })
  .catch(() => {
    console.log('复制失败')
  })

// 导出数据
download(data, 'filename')

copyData

copyToClipboard

download

Special Character Handling Rules

According to the CSV specification and Excel's handling rules, S2 will process special characters as follows:

1. Field Wrapping Rule
   When a field contains any of the following characters, the entire field will be wrapped in double quotes:
   , " \r \n \t
2. Double Quote Escaping Rule
   Any double quotes " within a field will be escaped as two double quotes "".
3. Newline Handling Rule
   To be compatible with direct pasting into Excel cells:
   • Standalone \n will be replaced with \r\n
   • Existing \r\n will remain unchanged