Kendo UI for jQuery最新版工具下載

Spreadsheet支持在其工作表中放置圖像。

要將圖像加載到工作表，請使用以下任一方法：

• 使用Spreadsheet工具欄上提供的插入圖像工具。
• 使用Spreadsheet的初始配置加載并指向小部件。
• 使用 sheet.addImage() API 方法。

使用插入圖像工具

您可以使用Insert Image工具在Spreadsheet中上傳和插入自定義圖像。

然后在彈出窗口中，您可以從文件系統中選擇或拖入文件。

配置Spreadsheet來初始化顯示圖像

1. 要正確配置Spreadsheet來在其工作表上顯示圖像，請將圖像定義添加到Spreadsheet圖像字段。在圖像對象中，每個圖像都應使用唯一鍵（屬性名稱）指定，并將圖像URL作為值。圖像 URL 可以是數據 URL（在這種情況下圖像完全包含在定義中），也可以是外部 URL。

images: {
testImage: "../images/1.jpg"
}

2. 參考該圖像并使用相應圖紙的繪圖陣列將其相應放置。繪制定義必須包含：

* A pointer to the cell that will hold the top-left corner of the image: `topLeftCell: "J6"`.
* X and Y offset of the top-left corner: `offsetX: 30, offsetY: 10`.
* Dimensions of the rendered image: `width: 320, height: 220`.
* A pointer to the image key that is used in the `images` configuration of the Spreadsheet: `image: "testImage"`.

以下示例演示了如何配置Spreadsheet來顯示 J6 單元格中左上角的圖像。

<div id="spreadsheet"></div>

<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
drawings: [{
topLeftCell: "J6",
offsetX: 30,
offsetY: 10,
width: 320,
height: 220,
image: "testImage"
}]
}],
images: {
testImage: "../images/1.jpg"
}
})
</script>

使用 addImage() 方法

Spreadsheet Sheet API公開了一種方法，該方法允許您以編程方式將圖像添加到電子表格并將其放置在工作表上。

1. 創建一個新的kendo.spreadsheet.Drawing 對象，Drawing 對象的配置與上一節示例中描述的配置相同。

2. 將Drawing傳遞給 sheet.addDrawing()。

當您將Spreadsheet的導出功能與圖像一起使用時，請注意以下事項：

• 圖像僅支持客戶端導入和導出，當您進行服務器端導入或導出時，不會加載或導出任何圖像。
• 要使用默認的Spreadsheet功能將任何圖像正確導出為PDF，包含該圖像的工作表上必須至少存在一個包含數據的單元格。

<div id="spreadsheet"></div>

<script>
var spreadsheet = $("#spreadsheet").kendoSpreadsheet({
sheets: [{
drawings: [{
topLeftCell: "J6",
offsetX: 30,
offsetY: 10,
width: 320,
height: 220,
image: "testImage"
}]
}],
images: {
testImage: "../images/1.jpg"
}
}).data("kendoSpreadsheet");

var sheet = spreadsheet.activeSheet();

var drawing = kendo.spreadsheet.Drawing.fromJSON({
topLeftCell: "J6",
offsetX: 30,
offsetY: 10,
width: 320,
height: 220,
image: spreadsheet.addImage("../images/1.jpg")
});

sheet.addDrawing(drawing);
</script>

Kendo UI for jQuery | 下載試用

Kendo UI for jQuery是完整的jQuery UI組件庫，可快速構建出色的高性能響應式Web應用程序。Kendo UI for jQuery提供在短時間內構建現在Web應用程序所需要的一切，從多個UI組件中選擇，并輕松地將它們組合起來，創建出酷炫響應式的應用程序，同時將開發時間加快了50%。