检查 SkyDrive JavaScript 嵌入代码
使用 Excel Services JavaScript API

嵌入Microsoft Excel 工作簿是指存储在 Microsoft® Windows® Live SkyDrive® 上但显示在主机网页中的工作簿。嵌入工作簿的一种方法是在 HTML <iframe> 元素中显示工作簿。也可以结合使用 ECMAScript(JavaScript、JScript)和 HTML <div> 元素嵌入存储在 SkyDrive 上的 Excel 工作簿。与在 <iframe> 元素中嵌入工作簿相比,在 <div> 元素中嵌入工作簿的优点是,您可以通过编程方式操作工作簿以创建自定义应用程序和混合 Web 应用程序。

有关如何使用 HTML <iframe> 在网页上嵌入工作簿的详细信息,请参阅 在网页上嵌入 Excel 工作簿

在本主题中,您将学习如何使用 Excel ServicesECMAScript(JavaScript、JScript)(JavaScript) API 以编程方式处理存储在 SkyDrive 上的嵌入 Excel 工作簿。

处理嵌入文档

若要以编程方式处理嵌入工作簿,您必须做两件事:将 Excel 工作簿存储在 SkyDrive 上;将 ECMAScript(JavaScript、JScript)代码插入网页以便以编程方式嵌入工作簿。

在 SkyDrive 上存储工作簿

在网页上嵌入工作簿之前,该工作簿必须可公开查看。工作簿必须在 SkyDrive 中公开共享。有关如何共享存储在 SkyDrive 上的工作簿的详细信息,请参阅 如何更改哪些人可以访问我的文件夹、文件和照片?

创建 JavaScript 嵌入代码段

若要在主机网页上显示工作簿并以编程方式处理工作簿,您必须创建嵌入代码并将其插入主机网页的 HTML 中。嵌入代码定义 <div> 元素,包含对 Excel ServicesECMAScript(JavaScript、JScript)库的引用,在 <div> 元素内指定要嵌入的工作簿(或图表、命名对象或区域),指定工作簿的各种显示和交互性选项,然后嵌入工作簿。

尽管您可以通过编写自己的代码来嵌入工作簿,但编写工作簿 ECMAScript(JavaScript、JScript)嵌入代码最简单的方式是使用通过 Excel Web App"共享"菜单获得的"嵌入"对话框。使用"嵌入"对话框用户界面,您可以设置工作簿的嵌入选项,并自动生成 HTML 和 ECMAScript(JavaScript、JScript)代码以便使用指定工作簿的显示和交互性的选项嵌入工作簿。有关如何使用"嵌入"对话框自动生成嵌入代码的详细信息,请参阅 进行混合:将 Excel 扩展到 Web 应用程序

下面一节讨论 SkyDrive JavaScript 嵌入代码。

检查 SkyDrive JavaScript 嵌入代码

在这一节中,您将学习以编程方式嵌入工作簿和处理工作簿要用到的 JavaScript 代码的基本元素。以下代码示例演示所需嵌入代码的所有基本元素。此处显示的代码是使用本主题的上一节中提到的"嵌入"对话框创建的。

<div id="myExcelDiv" style="width: 402px; height: 346px"></div>
<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
 * This code uses the Microsoft Office Excel JavaScript object model to programmatically insert the
 * Excel Web App into a div with id=myExcelDiv. The full API is documented at
 * https://msdn.microsoft.com/en-us/library/hh315812.aspx. There you can find out how to get
 * values programmatically from your Excel file and how to use the rest of the object model. 
// Use this file token to reference Book1.xlsx in the Excel APIs
var fileToken = "SD206C5E037684EDE5!1119/2336345675664780773/";
// Run the Excel load handler on page load
if (window.attachEvent) {
window.attachEvent("onload", loadEwaOnPageLoad);
} else {
window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
function loadEwaOnPageLoad() {
var props = {
uiOptions: {
showGridlines: false,
showRowColumnHeaders: false,
showParametersTaskPane: false
interactivityOptions: {
allowTypingAndFormulaEntry: false,
allowParameterModification: false,
allowSorting: false,
allowFiltering: false,
allowPivotTableInteractivity: false
Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
function onEwaLoaded(result) {
 * Add code here to interact with the embedded Excel web app.
 * For more information, see https://msdn.microsoft.com/en-us/library/hh315812.aspx.
</script>

为嵌入工作簿定义 <div> 元素

嵌入代码的第一行定义将存放嵌入工作簿的 <div> 元素。

<divid="myExcelDiv" style="width: 402px; height: 346px"></div>

id 属性指定 <div> 元素的标识符。ECMAScript(JavaScript、JScript)代码中稍后会使用 id 来指定要在何处嵌入工作簿。

<div> 元素还包含一个 style 属性,该属性指定 <div> 元素的维度。

包含对 Excel Services JavaScript 对象模型库的引用

若要以编程方式处理嵌入工作簿,您必须具有对 Excel ServicesECMAScript(JavaScript、JScript)API 的引用。示例中的嵌入代码将插入一个指向 SkyDrive 上承载的 Excel ServicesECMAScript(JavaScript、JScript)API 的 <script> 元素。

<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS? v=1&kip=1"></script>

<script> 元素的 src 属性指定 SkyDrive 上的库位置。在处理 SkyDrive 上存储的嵌入工作簿时,src 属性必须始终指向 SkyDrive Excel ServicesECMAScript(JavaScript、JScript)API 库位置。

src 属性的 URI 包含两个 querystring 参数:表示"version"(版本)的 v 和表示"keep inbound protocol"(保留入站协议)的 kip。

v 指示 Excel ServicesECMAScript(JavaScript、JScript)API 的版本。目前,只有版本 1 可用。

kip 指定重定向应保留使用的协议(http 或 https)。

指定要嵌入的 Microsoft Excel 工作簿

本主题前面显示的嵌入代码包含一个脚本元素,该元素包含的 ECMAScript(JavaScript、JScript)执行大部分嵌入和配置工作簿工作。ECMAScript(JavaScript、JScript)代码的第一行使用 SkyDrive 公共文件夹中存储的工作簿的标识符初始化一个变量。

<script type="text/javascript">
// Use this file token to reference Book1.xlsx in the Excel APIs
var fileToken = "SD206C5E037684EDE5!1119/2336345675664780773/";

在该代码示例中,fileToken 包含的字符串值指定 SkyDrive 上存储的名为 Book1.xlsx 的工作簿。

设置嵌入工作簿的显示和交互性选项

可以指定嵌入工作簿的显示方式以及在显示后用户与工作簿的交互方式。API 中提供的选项与"嵌入"对话框用户界面中可以设置的许多选项相对应。

在以下代码示例中,显示和交互性选项在函数 loadEwaOnPageLoad 中设置。

function loadEwaOnPageLoad() {
var props = {
uiOptions: {
showGridlines: false,
showRowColumnHeaders: false,
showParametersTaskPane: false
interactivityOptions: {
allowTypingAndFormulaEntry: false,
allowParameterModification: false,
allowSorting: false,
allowFiltering: false,
allowPivotTableInteractivity: false
Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);

loadEwaonPageLoad 由页面 onLoad 事件调用。

// Run the Excel load handler on page load
if (window.attachEvent) {
    window.attachEvent("onload", loadEwaOnPageLoad);
else {
    window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
function loadEwaOnPageLoad() {

if…else 代码块提供两个测试,以查看浏览器识别哪种附加事件的方法。这是为了考虑最先进的浏览器或者支持 attachEvent 方法或者支持 addEventListener 方法这一事实。同时包含这两个方法可以确保 ECMAScript(JavaScript、JScript)代码在最先进的浏览器中能够运行。

在 loadEwaonPageLoad 函数中,代码定义 props 对象,其中包含两个对象作为属性:uiOptions 和 interactivityOptions。uiOptions 包含的属性会影响嵌入工作簿的显示方式(如是否显示行和列标题),而 interactivityOptions 包含的属性会影响用户与工作簿的交互方式(如允许键入和输入公式)。

嵌入工作簿

上面的示例中嵌入代码执行的最后一步是在之前创建的 <div> 中嵌入工作簿。这是通过调用异步 Ewa.EwaControl.loadEwaAsync 方法执行的。

Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);

以下代码示例中显示了 loadEwaAsync 方法的方法签名。

loadEwaAsync(fileID, divID, embedOptions, callback, userContext)

loadEwaAsync 方法定义以下参数:

  • fileID – 一个 string 值,包含工作簿的文件令牌。

  • divID – 一个 string 值,包含工作簿在其中显示的 <div> 元素的标识符。

  • embedOptions – 一个对象,指定嵌入工作簿的显示和交互性选项。

  • callback – 当 loadEwaAsync 方法运行完毕时调用的回调。

  • userContext - 一个对象,以便调用方可以通过异步调用传递状态。

    使用 Excel Services JavaScript API

    本主题前面显示的嵌入代码加载工作簿并使 Excel ServicesECMAScript(JavaScript、JScript)API 可在嵌入代码中使用。然后,您可以利用该 API 继续使用嵌入工作簿来创建您自己的自定义应用程序。

    以下代码示例演示如何使用 Excel ServicesECMAScript(JavaScript、JScript)API 以编程方式处理嵌入的 Excel 工作簿。

    <div id="myExcelDiv" style="width: 402px; height: 346px"></div>
    <script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
    <script type="text/javascript">
        * This code uses the Microsoft Office Excel JavaScript object model to programmatically insert the
        * Excel Web App into a div with id=myExcelDiv. The full API is documented at
        * https://msdn.microsoft.com/en-us/library/hh315812.aspx. There you can find out how to programmatically get
        * values from your Excel file and how to use the rest of the object model. 
        // Use this file token to reference Book1.xlsx in the Excel APIs
        var fileToken = "SD310A16DD64ED7E41!112/3533661997762444865/";
        var ewa = null;
        // Run the Excel load handler on page load.
        if (window.attachEvent)
            window.attachEvent("onload", loadEwaOnPageLoad);
        } else
            window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
        function loadEwaOnPageLoad()
            var props = {
                uiOptions: {
                    showGridlines: false,
                    showRowColumnHeaders: false,
                    showParametersTaskPane: false
                interactivityOptions: {
                    allowTypingAndFormulaEntry: false,
                    allowParameterModification: false,
                    allowSorting: false,
                    allowFiltering: false,
                    allowPivotTableInteractivity: false
            // Embed workbook using loadEwaAsync
            Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
        function onEwaLoaded(asyncResult)
            if (asyncResult.getSucceeded())
                // Use the AsyncResult.getEwaControl() method to get a reference to the EwaControl object
                ewa = asyncResult.getEwaControl();
                ewa.add_activeCellChanged(cellChanged);
                alert("Async operation failed!");
            // ...
        // Handle the active cell changed event.
        function cellChanged(rangeArgs)
            // Use the RangeEventArgs object to get information about the range.
            var sheetName = rangeArgs.getRange().getSheet().getName();
            var col = rangeArgs.getRange().getColumn();
            var row = rangeArgs.getRange().getRow();
            var value = rangeArgs.getFormattedValues();
            alert("The active cell is located at row " + (row + 1) + " and column " + (col + 1) + " with value '" + value + "'.");
            // ...
    </script>
    

    有关 Excel ServicesECMAScript(JavaScript、JScript)API 的详细信息,请参阅 SharePoint SDK 中介绍 Ewa 命名空间的文档。

    Excel Services ECMAScript 概述

  •