安装 Wolfram 笔记本 Embedder 库

安装该库可将云笔记本嵌入网页中,并使用 JavaScript 与之交互.

使用 CDN 中的脚本标签...

获取库

在相关 HTML 文件并输入以下内容以跨源请求方式导入库:

<script crossorigin src="https://www.wolframcdn.com/notebook-embedder/0.1/wolfram-notebook-embedder.js"></script>

使用库

创建一个要在 HTML 文件中呈现笔记本的容器:

<div id="notebookContainer"></div>

将笔记本嵌入到给定的 DOM 节点中:

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
    document.getElementById('notebookContainer'),
    {allowInteract: true}
)

使用导入语句...

该流程使 npmwebpack. 关于 webpack 的更多详细信息,请参阅其文档.

确认已安装 Node.js

从命令行调用 node -v:

$ node -v
v9.11.1

设置项目

创建一个包含所有文件的目录,然后切换到该目录:

$ mkdir wolfram-notebook-webpack && cd wolfram-notebook-webpack

使用默认值初始化 npm:

$ npm init -y

在本地安装 webpack:

$ npm install webpack --save-dev

安装 webpack-cli 在命令行运行 webpack:

$ npm install webpack-cli --save-dev

创建一个如下所示的项目结构:

wolfram-notebook-webpack
    |- package.json
    |- package-lock.json
    |- /node_modules
    |- /src
        |- index.js
    |- /dist
        |- index.html

获取库

使用 npm 将库安装到本地的父 Wolfram-notebook-webpack 目录中:

npm install --save wolfram-notebook-embedder

使用库

转换到分发子目录:

$ cd dist

打开 index.html 并创建一个要在其中渲染笔记本的容器:

<div id="notebookContainer"></div>

转换到源子目录:

$ cd ../src

打开 index.js,导入库并将笔记本嵌入到给定的 DOM 节点中:

import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
    document.getElementById('notebookContainer'),
    {allowInteract: true}
)

创建构建

转到父目录:

$ cd ..

打开 package.json 文件,并将 dependencies 键的值更改为以下内容:

"dependencies": {
    "wolfram-notebook-embedder": "^0.1.5"
}

用 npx 创建构建:

$ npx webpack

技术要点

该库公开了一个将笔记本呈现到 DOM 节点的 embed 函数. 它返回一个 Promise ,其通过各种方法解析为一个对象,以进一步与笔记本进行交互并控制笔记本. 有关更多信息,请参见 Wolfram Notebook Embedder 库接口文档.