Jspreadsheet CE V5 使用手册(保姆版) 二

前端老曹2025-12-03 12:29

#Jspreadsheet CE原名（jExcel），中文使用文档少之又少，导致使用的时候非常不便#

概述

Jspreadsheet CE(原名jExcel)是一款免费且轻量级的JavaScript电子表格库，旨在帮助开发者将类似Excel的数据网格和电子表格库，能引入其应用程序中。该库使开发者能够使用React、Angular、VUE或纯JavaScript构建强大的数据管理界面。

六、data（数据管理）

本节详细介绍了在 Jspreadsheet 数据网格中加载、更新和管理数据的方法、事件和设置。

加载数据

数据格式

您可以使用多种数据格式创建电子表格，包括：

  • 现有 HTML 表格

  • CSV 文件

  • JSON 对象

  • JavaScript 数组

文档

方法

这些方法有助于管理您的网格或电子表格中的数据。

读取方法
方法 描述
getValue 获取单元格的值。 @param cell - 单元格名称。 @param processedValue - 如果为 true，则返回单元格的 innerHTML。否则，返回数据属性中单元格的值。 `worksheetInstance.getValue(cell: string, processedValue?: boolean): CellValue
getValueFromCoords{.nowrap} 通过坐标获取单元格的值。 @param x - 列索引。 @param y - 行索引。 @param processedValue - 如果为 true，则返回单元格的 innerHTML。否则，返回数据属性中单元格的值。 `worksheetInstance.getValueFromCoords(x: number, y: number, processedValue?: boolean): CellValue
getData 获取完整或部分表格数据。 @param highlighted - 如果为 true，仅获取高亮单元格的数据。如果为 false，则获取所有单元格的数据。默认值：false。 @param processed - 如果为 false，则使用单元格的 innerHTML 构建返回值。否则，使用 {@link WorksheetOptions.data} 属性构建返回值。默认值：false。 @param delimiter - 列分隔符。如果指定此属性，结果将格式化为类似 csv 的形式。 @param asJson - 如果此属性为 true，结果将格式化为 json。 getData(highlighted?: boolean, processed?: boolean, delimiter?: string, asJson?: boolean): CellValue[][];
getRowData 通过索引获取行的数据。 @param rowNumber - 行索引。 @param processed - 如果为 true，则使用单元格的 innerHTML 构建返回值。否则，使用数据属性构建返回值。默认值：false。 `worksheetInstance.getRowData(rowNumber: number, processed?: boolean): CellValue[]
getColumnData 通过索引获取列的数据。 @param columnNumber - 列索引。 @param processed - 如果为 true，则使用单元格的 innerHTML 构建返回值。否则，使用数据属性构建返回值。默认值：false。 worksheetInstance.getColumnData(columnNumber: number, processed?: boolean): CellValue[];
download 将当前数据作为 CSV 文件下载。 @param includeHeaders - 如果为 true，无论 {@link SpreadsheetOptions.includeHeadersOnDownload} 属性值如何，都包含表头。 @param processed - 如果为 true，结果将包含显示的单元格值。否则，结果将包含实际的单元格值。 worksheetInstance.download(includeHeaders?: boolean, processed?: boolean): void;
写入方法
方法 描述
setValue 更改一个或多个单元格的值。 @param cell - 单元格的名称、表示单元格的 HTML 元素，或其项可以是前述替代项或对象的数组。当数组项是对象时，它必须具有单元格坐标（"x" 和 "y"），并且可以具有单元格的新值（"value"），但如果没有，则使用 "value" 参数。 @param value - 新的单元格值。 @param force - 如果为 true，即使单元格为只读，也会更改其值。 `worksheetInstance.setValue(cell: string
setValueFromCoords{.nowrap} 根据坐标设置单元格值。 @param x - 单元格列索引。 @param y - 单元格行索引。 @param value - 新值。 @param force - 如果为 true，即使单元格为只读，也会更改其值。 worksheetInstance.setValueFromCoords(x: number, y: number, value: CellValue, force?: boolean): void;
setData 设置数据。 @param data - 新数据。可以是单元格值的数组，或值都是单元格值的对象数组。 `worksheetInstance.setData(data?: CellValue[][]
setRowData 通过索引设置行的数据。 @param rowNumber - 行索引。 @param data - 新数据。值为 null 的位置不会更改表中的值。 @param force - 如果为 true，此方法也会更改只读列的内容。 `worksheetInstance.setRowData(rowNumber: number, data: (CellValue
setColumnData 通过索引设置列的数据。 @param colNumber - 列索引。 @param data - 新数据。值为 null 的位置不会更改表中的值。 @param force - 如果为 true，此方法也会更改只读列的内容。 `worksheetInstance.setColumnData(colNumber: number, data: (CellValue

事件

您可以找到与数据操作相关的 JavaScript 事件列表。

事件 描述
onbeforechange{.nowrap} 在列值更改之前发生。如果返回任何值，它将是单元格的新值。 @param instance - 将发生更改的工作表实例。 @param cell - 表示正在更改的单元格的 HTML 元素。 @param colIndex - 正在更改的单元格列索引。 @param rowIndex - 正在更改的单元格行索引。 @param newValue - 将应用于单元格的值 `onbeforechange(instance: WorksheetInstance, cell: HTMLTableCellElement, colIndex: string
onchange 在列值更改之后发生。 @param instance - 发生更改的工作表实例。 @param cell - 表示正在更改的单元格的 HTML 元素。 @param colIndex - 正在更改的单元格列索引。 @param rowIndex - 正在更改的单元格行索引。 @param newValue - 新的单元格值。 @param oldValue - 旧的单元格值。 `onchange(instance: WorksheetInstance, cell: HTMLTableCellElement, colIndex: string
onafterchanges 在表中的所有更改应用之后发生。 @param instance - 发生更改的工作表实例。 @param changes - 更改列表。 onafterchanges(instance: WorksheetInstance, changes: CellChange[]): void;

初始设置

初始化数据网格时可用的设置列表。

属性 描述
`data: Array Object`
url: String 从外部文件加载数据。
csv: String 从外部 CSV 文件加载数据。
csvHeaders: Boolean CSV 文件的第一行用作表头。
csvDelimiter: String 设置 CSV 分隔符（默认：','）。

示例

从二维数组创建数据网格。

从 JavaScript 数组创建电子表格

javascript 复制代码 
<template>
    <Spreadsheet ref="spreadsheetRef">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";


// 表格引用
const spreadsheetRef = ref(null);

// 数据
const data = ref([
    ['马自达', 2001, 2000],
    ['标致', 2010, 5000],
    ['本田飞度', 2009, 3000],
    ['本田CRV', 2010, 6000],
]);

// 列
const columns = ref([
    { title:'型号', width:'300px' },
    { title:'价格', width:'80px' },
    { title:'车型', width:'100px' }
]);
</script>

从 CSV 文件创建数据网格

如何从远程 CSV 文件创建数据网格

javascript 复制代码 
<template>
    <Spreadsheet ref="spreadsheetRef">
        <Worksheet csv="/jspreadsheet/demo.csv" csvHeaders />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

const spreadsheetRef = ref(null);
</script>

从 HTML 表格创建数据网格

如何从现有 HTML 表格元素创建数据网格

javascript 复制代码 
<template>
    <table ref="spreadsheetRef">
        <thead>
            <tr>
                <td>排名</td>
                <td>标题</td>
                <td>艺术家</td>
                <td>峰值</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>DIVINELY UNINSPIRED TO A HELLISH EXTENT</td>
                <td>刘易斯·卡帕尔迪</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>NO 6 COLLABORATIONS PROJECT</td>
                <td>艾德·希兰</td>
                <td>1</td>
            </tr>
            <tr>
                <td>3</td>
                <td>THE GREATEST SHOWMAN</td>
                <td>电影原声带</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { jspreadsheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

// 表格引用
const spreadsheetRef = ref(null);

// 组件挂载时初始化 jspreadsheet
onMounted(() => {
    if (spreadsheetRef.value) {
        jspreadsheet(spreadsheetRef.value);
    }
});
</script>

批量更新

如何通过单个调用更新多个单元格

javascript 复制代码 
<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet />
    </Spreadsheet>
    <input type="button" value="更新多个单元格" @click="update" />
</template>

<script>
import { ref } from "vue";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    setup() {
        const spreadsheetRef = ref(null);

        const update = () => {
            const records = [
                {
                    x: 0,
                    y: 0,
                    value: "更新 A1",
                },
                {
                    x: 10,
                    y: 10,
                    value: "另一个单元格",
                },
                // (...)
            ];

            if (spreadsheetRef.value) {
                spreadsheetRef.value.current[0].setValue(records);
            }
        };

        return {
            spreadsheetRef,
            update,
        };
    },
};
</script>

七、columns（电子表格列）

Jspreadsheet 的列设置控制列内所有单元格的属性，包括数据类型、只读状态、数据掩码和渲染选项。本节涵盖 Jspreadsheet 中的设置、事件和方法，以根据您的应用程序需求自定义电子表格功能。

方法

以下方法允许以编程方式与 Jspreadsheet 中的电子表格列进行交互。

方法 描述
getWidth 获取一个或所有列的宽度。 @param column - 列索引。如果省略，返回所有列的宽度。 `worksheetInstance.getWidth(column?: number): number
setWidth 设置列的宽度。 @param column - 列索引。 @param width - 新宽度。 worksheetInstance.setWidth(column: number, width: number): void; 设置一个或多个列的宽度。 @param column - 列索引数组。 @param width - 新宽度数组。 `worksheetInstance.setWidth(column: number[], width: number
getColumn 检索指定列的设置。 worksheetInstance.getColumn(colNumber: Number): Object
moveColumn 移动列。如果"此操作将销毁任何现有的合并单元格。确定吗？"对话框收到否定响应，则此方法返回 false。 @param o - 列索引。 @param d - 新的列索引。 `worksheetInstance.moveColumn(columnNumber: number, newPositionNumber: number): false
insertColumn 插入一个或多个列。如果 onbeforeinsertcolumn 事件返回 false 或"此操作将销毁任何现有的合并单元格。确定吗？"对话框收到否定响应，则此方法返回 false。 @param mixed - 要插入的列数。也可以是值的数组，但在这种情况下，仅插入一个列，其数据基于数组项。默认值：1。 @param columnNumber - 用作插入参考的列索引。默认值：最后一列。 @param insertBefore - 在参考列之前或之后插入新列。默认值：false。 @param properties - 新列属性。 `worksheetInstance.insertColumn(mixed?: number
deleteColumn{.nowrap} 删除列。如果 onbeforedeletecolumn 事件返回 false 或"此操作将销毁任何现有的合并单元格。确定吗？"对话框收到否定响应，则此方法返回 false。 @param columnNumber - 开始删除的列索引。 @param numOfColumns - 要删除的列数。 `worksheetInstance.deleteColumn(columnNumber?: number, numOfColumns?: number): false

事件

您的电子表格中提供了多个事件来处理列操作，包括 onbefore 事件，可让您拦截、验证或取消用户操作。

事件 描述
onbeforeinsertcolumn{.nowrap} 在插入新列之前触发。返回 false 可取消操作。 `onbeforeinsertcolumn(instance: WorksheetInstance, columns: { column: number, options: Column, data?: CellValue[] }[]): undefined
oninsertcolumn 在新列插入之后触发。 oninsertcolumn(instance: WorksheetInstance, columns: { column: number, options: Column, data?: CellValue[] }[]): void;
onbeforedeletecolumn 在删除列之前触发。返回 false 可取消操作。 `onbeforedeletecolumn(instance: WorksheetInstance, removedColumns: number[]): undefined
ondeletecolumn 在删除列之后触发。 ondeletecolumn(instance: WorksheetInstance, removedColumns: number[]): void;
onmovecolumn 在列移动到新位置之后触发。 onmovecolumn(instance: WorksheetInstance, oldPosition: number, newPosition: number): void;

初始设置

以下与列相关的属性可在在线电子表格初始化期间配置：

属性 描述
allowInsertColumn: boolean 允许用户添加新列。默认值：true
allowManualInsertColumn: boolean{.nowrap} 当用户在最后一列按 Tab 键时添加新列。默认值：true
allowDeleteColumn: boolean 允许用户删除列。默认值：true
allowRenameColumn: boolean 允许用户重命名列。默认值：true
columnDrag: boolean 启用更改列位置的拖放功能。默认值：true
columnSorting: boolean 允许用户排序列。默认值：true
columnResize: boolean 允许用户调整列宽。默认值：true
defaultColWidth: number 设置默认列宽。默认值：100px
defaultColAlign: string 设置默认列文本对齐方式。默认值：center
minSpareCols: number 电子表格末尾的空白列数。默认值：none

可用属性

Jspreadsheet 中的每种列类型都可以包含特定的属性。以下是一些最常用的选项：

属性 描述
type 定义列的编辑器类型。可以是原生编辑器的字符串，也可以是自定义编辑器插件的方法。
title 列的标题。
name 使用 JSON 数据时的属性名称或路径。
width 列的宽度。
align 列内容的对齐方式。默认值：center。
url 为此列的下拉列表加载项目的 URL。
source 下拉列表或自动完成字段的项目。
autocomplete 启用列的自动完成功能。
multiple 允许在下拉列表或自动完成字段中进行多选。
mask 应用于数据单元格的输入掩码。
decimal 用作小数分隔符的字符。
disabledMaskOnEdition 编辑时禁用掩码。
render 单元格内容的渲染器方法或规则。
format 单元格中的日期或数字格式。日历的默认值："DD/MM/YYYY"。
options 列的扩展配置。
添加新列

要向数据网格中插入新列，可以传递一个对象数组，每个对象包含以下概述的三个属性。这种方法允许在单个操作中创建多个列。

方法 描述
data: any[] 包含列数据的数组
column: number 新列将插入的索引。
options: object 指定列属性的对象。
示例

要在网格开头添加新列：

javascript 复制代码 
worksheet.insertColumn([
    {
        data: [1,2,3],
        column: 0,
        options: {
            type: 'calendar',
            title: '我的新列'
        }
    }
]);

示例

渲染方法

渲染方法在将可见数据插入网格单元格之前修改它。

javascript 复制代码 
<template>
    <Spreadsheet ref="spreadsheetRef">
        <Worksheet 
            :data="data" 
            :columns="columns" 
        />
    </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jspreadsheet-ce/dist/jspreadsheet.css";

// 添加任意数量的前导零。
const pad = (cell, value, x, y, instance, options) => {
    if (value !== '') {
        let size = options.digits || 0;
        value = value.toString();
        while (value.length < size) {
            value = "0" + value;
        }
        cell.innerText = value;
    }
}

// 表格引用
const spreadsheetRef = ref(null);

// 数据
const data = ref([[1]]);

// 列
const columns = ref([
    { render: pad, digits: 6 }
]);
</script>

编程方法

一个基本的电子表格示例，演示了各种编程方法。

javascript 复制代码 
<template>
  <Spreadsheet ref="spreadsheetRef">
      <Worksheet :data="data" />
  </Spreadsheet>
  <ul>
      <li @click="insertBlankColumn()">
          点击在表格末尾插入一个新的空白列
      </li>
      <li @click="insertMultipleColumns()">
          点击在表格开头插入两个新的空白列
      </li>
      <li @click="deleteLastColumn()">
          点击删除最后一列
      </li>
      <li @click="moveFirstColumnToThird()">
          点击将第一列移动到第三位
      </li>
      <li @click="hideFirstColumn()">
          隐藏第一列
      </li>
      <li @click="showFirstColumn()">
          显示第一列
      </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

// 数据
const data = ref([
  ['美国', '奶酪', 1000 ],
  ['加拿大', '苹果', 1200 ],
  ['加拿大', '胡萝卜', 2000 ],
  ['巴西', '橙子', 3800 ],
]);

// 表格引用
const spreadsheetRef = ref(null);

// 列操作方法
const insertBlankColumn = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].insertColumn();
  }
};

const insertMultipleColumns = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].insertColumn(2, 0, 1);
  }
};

const deleteLastColumn = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].deleteColumn();
  }
};

const moveFirstColumnToThird = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].moveColumn(0, 2);
  }
};

const hideFirstColumn = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].hideColumn(0);
  }
};

const showFirstColumn = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].showColumn(0);
  }
};
</script>

八、cells（电子表格单元格）

本指南深入介绍了 Jspreadsheet 中的数据网格单元格，包括关键方法、配置选项和基本实现示例。

专业版差异(需要付费)

Jspreadsheet 专业版支持单元格级别的编辑器自定义，并允许动态编程更改单元格类型。

方法

本节概述了在数据网格内与单元格及其属性进行交互的方法。

方法 描述
getCell 通过单元格名称获取单元格 DOM 元素。 @param cell - 单元格名称。 worksheetInstance.getCell(cell: string): HTMLTableCellElement; 通过单元格坐标获取单元格 DOM 元素。 @param x - 单元格列索引。 @param y - 单元格行索引。 worksheetInstance.getCell(x: number, y: number): HTMLTableCellElement;
getCellFromCoords{.nowrap} 通过单元格坐标获取单元格 DOM 元素。 @param x - 单元格的列索引。 @param y - 单元格的行索引。 worksheetInstance.getCellFromCoords(x: number, y: number): HTMLTableCellElement;

示例

以下是一个汽车贷款计算表格的示例，展示了样式、合并单元格和行属性。

javascript 复制代码 
<template>
  <div>
      <Spreadsheet ref="spreadsheetRef">
          <Worksheet 
              :data="data" 
              :columns="columns" 
              :merge-cells="mergeCells" 
              :rows="rows" 
              :style="style" 
          />
      </Spreadsheet>
      <input 
          type="button" 
          value="应用外部样式" 
          @click="applyStyle" 
          class="jss_object" 
      />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

const spreadsheetRef = ref(null);

// 数据
const data = [
  ['汽车贷款', ''],
  ['购买价格', '19700'],
  ['首付款', '1000'],
  ['旧车置换价值', '500'],
  ['利率', '0.0305'],
  ['贷款期限（月）', '60'],
  ['', ''],
  ['月供', '=PMT(B5/12,B6,B2-(B3+B4))'],
  ['总成本', '=-(B8*B6)+(B3+B4)'],
];

// 列
const columns = [
  { width:'300px' },
  { width:'200px' },
];

// 合并单元格
const mergeCells = {
  A1: [2, 1],
};

// 行属性
const rows = {
  0: { height:'200px' }
};

const style = {
  A1: 'font-weight: bold'
};

const applyStyle = () => {
  if (spreadsheetRef.value) {
      spreadsheetRef.value.current[0].getCell('A1').style.backgroundColor = 'orange';
  }
};
</script>

九、config（数据网格设置）

本节概述了定义电子表格和工作表行为和功能的参数。配置选项分为两个级别：

  • 电子表格级别的设置用于总体配置。

  • 工作表级别的设置用于各个工作表的自定义。

方法

以下方法允许以编程方式操作配置设置：

方法 描述
getConfig 检索工作表的配置。 getConfig() => Object
setConfig 更新工作表的配置。 setConfig(options: Object, level?: Boolean) => void

示例

数据网格克隆

此示例演示如何复制数据网格配置并使用它来初始化新的电子表格。

javascript 复制代码 
<template>
  <Spreadsheet ref="spreadsheetRef" tabs toolbar>
      <Worksheet :data="[[1,2,3]]" :minDimensions="[6,6]" />
  </Spreadsheet>
  <div ref="copyRef"></div><br />
  <textarea ref="consoleRef"></textarea><br />
  <button @click="clone">克隆上面的数据网格</button>
</template>

<script>
import { ref } from 'vue';
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet-ce/vue";

import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

export default {
  components: {
      Spreadsheet,
      Worksheet,
  },
  setup() {
    const spreadsheetRef = ref(null);
    const copyRef = ref(null);
    const consoleRef = ref(null);



      // 克隆数据网格的方法
      const clone = function () {
          // 获取数据网格配置
          let config = JSON.stringify(spreadsheetRef.value.current[0].parent.getConfig());
          // 在文本区域显示
          consoleRef.value.value = config;
          // 销毁任何现有的电子表格
          jspreadsheet.destroy(spreadsheetRef.value);
          // 解析
          config = JSON.parse(config);
          // 创建一个新的电子表格
          jspreadsheet(copyRef.value, config);
      };

      return {
        spreadsheetRef,
        copyRef,
        consoleRef,
        clone
      };
  }
}
</script>

十、clipboard（数据网格剪贴板）

概述

Jspreadsheet 中的剪贴板提供了一套全面的功能，便于在 Jspreadsheet 实例和其他电子表格软件（如 Excel 或 Google Sheets）之间复制和粘贴数据。这些功能包括自动公式更新、粘贴操作期间的数据覆盖以及自定义事件处理。

本节详细介绍了您可用于控制剪贴板行为、自定义粘贴操作并确保不同数据网格之间平滑互操作性的方法和事件。

主要功能

  • 自动公式更新：粘贴包含公式的数据时，Jspreadsheet 会自动更新公式以匹配新的数据上下文；

  • 数据覆盖：Jspreadsheet 支持在粘贴操作期间覆盖数据，使您能够精细控制粘贴数据的处理；

  • 自定义事件：您可以挂钩到特定的剪贴板相关事件，以自定义复制粘贴操作的行为，包括验证、转换和数据过滤；

专业版功能

Jspreadsheet 的专业版包含额外的剪贴板功能，通过格式化、样式和公式引用更新增强您的体验：

  • 复制和粘贴格式：使用专业版时，不仅数据，单元格格式（如字体样式、边框和颜色）和样式也会在复制粘贴操作中传输。

  • 公式引用更新：专业版确保粘贴的公式根据新位置自动调整其引用，保持电子表格公式的完整性。

文档

剪贴板管理方法

Jspreadsheet 提供了控制剪贴板操作的方法，允许在电子表格之间或与 Excel 等外部工具之间平滑传输数据。

方法 描述
copy 复制或剪切工作表中选定单元格的内容。 @param cut - 如果为 true，操作为剪切，否则为复制。 worksheetInstance.copy(cut?: boolean): void; 示例 ：worksheetInstance.copy(true) 剪切数据。
paste 在坐标处粘贴数据。将内容粘贴到一个或多个单元格中。 @param x - 将从其开始粘贴内容的单元格的列索引。 @param y - 将从其开始粘贴内容的单元格的行索引。 @param data - 要粘贴的内容。 `worksheetInstance.paste(x: number, y: number, data: string): false

剪贴板操作事件

这些事件允许您挂钩到复制和粘贴等剪贴板操作，从而更好地控制数据的传输或操作方式。

事件 描述
oncopy 当数据复制到剪贴板时触发。使用此事件可在数据进入剪贴板之前检查或修改复制的数据。 `oncopy(instance: WorksheetInstance, selectedRange: [number, number, number, number], copiedData: string, cut: boolean
onbeforepaste{.nowrap} 在粘贴发生之前触发，允许您验证或转换传入的数据。如果需要，您也可以取消粘贴。 `onbeforepaste(instance: WorksheetInstance, copiedText: { value: CellValue }[][], colIndex: number
onpaste 粘贴操作完成后触发。适用于粘贴后的后处理或触发额外操作。 onpaste(instance: WorksheetInstance, pastedInfo: { x: number, y: number, value: CellValue }[][]): void;

注意

在 Jspreadsheet CE 中，无法在 oncopy 事件期间取消或修改剪贴板值。

示例

拦截粘贴的数据

您可以根据需要拦截并取消粘贴事件。

javascript 复制代码 
<template>
  <Spreadsheet ref="spreadsheetRef" :onbeforepaste="onbeforepaste">
      <Worksheet :data="data" />
  </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

// 表格引用
const spreadsheetRef = ref(null);

// 数据
const data = [
  ['马自达', 2001, 2000],
  ['标致', 2010, 5000],
  ['本田飞度', 2009, 3000],
  ['本田CRV', 2010, 6000],
];

// 粘贴拦截方法
const onbeforepaste = () => {
  alert('不允许粘贴');
  return false;
};
</script>
相关推荐
洲星河ZXH22 分钟前
Java，日期时间API
java·开发语言·python
白菜__22 分钟前
去哪儿小程序逆向分析(酒店)
前端·javascript·爬虫·网络协议·小程序·node.js
HalvmånEver22 分钟前
Linux：进程创建（进程控制一）
linux·运维·服务器·学习·进程·fork
IT_陈寒24 分钟前
SpringBoot3.0实战：5个高并发场景下的性能优化技巧，让你的应用快如闪电⚡
前端·人工智能·后端
秋邱24 分钟前
AR 定位技术深度解析：从 GPS 到视觉 SLAM 的轻量化实现
开发语言·前端·网络·人工智能·python·html·ar
Boop_wu26 分钟前
[Java EE] 多线程进阶(3) [线程安全集合类]
开发语言·windows·python
老华带你飞28 分钟前
动物救助|流浪狗救助|基于Springboot+vue的流浪狗救助平台设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·流浪动物救助平台
雨疏风骤124029 分钟前
【FreeRTOS】任务、任务状态
开发语言·stm32·c#·rtos
云飞云共享云桌面32 分钟前
佛山某机械加工设备工厂10个SolidWorks共享一台服务器的软硬件
大数据·运维·服务器·前端·网络·人工智能·性能优化
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04BongoCat - 跨平台键盘猫动画工具05本地部署阿里最新开源的Z-Image06Linux下V2Ray安装配置指南07【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）08Meta第三代“分割一切”模型——SAM 3本地部署教程：首支持文本提示分割，400万概念、30毫秒响应，检测分割追踪一网打尽09【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连10Labelme从安装到标注：零基础完整指南