旧版框架
多年来,已经发布了许多框架。有些几年前很流行,但近年来逐渐衰落。仍然有许多部署使用这些框架,并且继续维护通常比使用现代 Web 技术重写更容易。
¥Over the years, many frameworks have been released. Some were popular years ago but have waned in recent years. There are still many deployments using these frameworks and it is oftentimes easier to continue maintenance than to rewrite using modern web techniques.
SheetJS 库努力保持广泛的浏览器和 JS 引擎兼容性。
¥SheetJS libraries strive to maintain broad browser and JS engine compatibility.
集成
¥Integration
可以在 HTML 页面的 SCRIPT
标记中引用 SheetJS 独立脚本。对于旧部署,必须首先加载 shim 脚本:
¥The SheetJS Standalone scripts
can be referenced in a SCRIPT
tag from an HTML page. For legacy deployments,
the shim script must be loaded first:
<!-- SheetJS version 0.20.3 `shim.min.js` -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/shim.min.js"></script>
<!-- SheetJS version 0.20.3 `xlsx.full.min.js` -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<script>
/* display SheetJS version */
if(typeof console == "object" && console.log) console.log(XLSX.version);
else if(typeof alert != "undefined") alert(XLSX.version);
else document.write(XLSX.version);
</script>
IE 浏览器
¥Internet Explorer
Internet Explorer 无人维护,用户应考虑使用现代浏览器。SheetJS 测试网格仍然包含 IE 并且应该可以工作。
¥Internet Explorer is unmaintained and users should consider modern browsers. The SheetJS testing grid still includes IE and should work.
现代上传和下载策略在旧版本的 IE 中不可用,但有使用 ActiveX 或 Flash 的方法。
¥The modern upload and download strategies are not available in older versions of IE, but there are approaches using ActiveX or Flash.
Complete Example (click to show)
This demo includes all of the support files for the Flash and ActiveX methods.
- Download the SheetJS Standalone script and shim script. Move both files to the project directory:
The ZIP includes the demo HTML file as well as the Downloadify support files.
Extract the contents to the same folder as the scripts from step 1
- Start a HTTP server:
npx -y http-server .
- Access the
index.html
from a machine with Internet Explorer.
Other Live Demos (click to show)
The hosted solutions may not work in older versions of Windows. For testing, demo pages should be downloaded and hosted using a simple HTTP server.
https://oss.sheetjs.com/sheetjs/ajax.html uses XMLHttpRequest to download test files and convert to CSV
https://oss.sheetjs.com/sheetjs/ demonstrates reading files with FileReader
.
Older versions of IE do not support HTML5 File API but do support Base64.
On MacOS you can get the Base64 encoding with:
$ <target_file base64 | pbcopy
On Windows XP and up you can get the Base64 encoding using certutil
:
> certutil -encode target_file target_file.b64
(note: You have to open the file and remove the header and footer lines)
上传策略
¥Upload Strategies
IE10 和 IE11 支持标准 HTML5 FileReader API:
¥IE10 and IE11 support the standard HTML5 FileReader API:
function handle_fr(e) {
var f = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var wb = XLSX.read(e.target.result);
process_wb(wb); // DO SOMETHING WITH wb HERE
};
reader.readAsArrayBuffer(f);
}
input_dom_element.addEventListener('change', handle_fr, false);
IE 不支持 Blob#arrayBuffer
!
¥Blob#arrayBuffer
is not supported in IE!
ActiveX 上传
¥ActiveX Upload
通过 Scripting.FileSystemObject
对象模型,VBScript 脚本语言中的脚本可以从文件系统上的任意路径读取。该填充程序包括一个特殊的 IE_LoadFile
函数,用于从文件中读取二进制数据。这应该从文件输入 onchange
事件调用:
¥Through the Scripting.FileSystemObject
object model, a script in the VBScript
scripting language can read from an arbitrary path on the file system. The shim
includes a special IE_LoadFile
function to read binary data from files. This
should be called from a file input onchange
event:
var input_dom_element = document.getElementById("file");
function handle_ie() {
/* get data from selected file */
var path = input_dom_element.value;
var bstr = IE_LoadFile(path);
/* read workbook */
var wb = XLSX.read(bstr, {type: 'binary'});
/* DO SOMETHING WITH workbook HERE */
}
input_dom_element.attachEvent('onchange', handle_ie);
下载策略
¥Download Strategies
作为文件 API 实现的一部分,IE10 和 IE11 提供 msSaveBlob
和 msSaveOrOpenBlob
函数来将 blob 保存到客户端计算机。该方法嵌入在 XLSX.writeFile
中,无需额外的垫片。
¥As part of the File API implementation, IE10 and IE11 provide the msSaveBlob
and msSaveOrOpenBlob
functions to save blobs to the client computer. This
approach is embedded in XLSX.writeFile
and no additional shims are necessary.
基于 Flash 的下载
¥Flash-based Download
可以使用 SWF 文件写入文件系统。Downloadify
[^1] 实现了一种解决方案。由于需要正版点击,所以无法强制下载。最安全的数据类型是 Base64:
¥It is possible to write to the file system using a SWF file. Downloadify
[^1]
implements one solution. Since a genuine click is required, there is no way to
force a download. The safest data type is Base64:
Downloadify.create(element_id, {
/* Downloadify boilerplate */
swf: 'downloadify.swf',
downloadImage: 'download.png',
width: 100, height: 30,
transparent: false, append: false,
/* Key parameters */
filename: "test.xlsx",
dataType: 'base64',
data: function() { return XLSX.write(wb, { bookType: "xlsx", type: 'base64' }); }
});
ActiveX 下载
¥ActiveX Download
通过 Scripting.FileSystemObject
对象模型,VBScript 脚本语言中的脚本可以写入文件系统上的任意路径。该垫片包括一个特殊的 IE_SaveFile
函数,用于将二进制字符串写入文件。它尝试写入“下载”文件夹、“文档”文件夹或“桌面”。
¥Through the Scripting.FileSystemObject
object model, a script in the VBScript
scripting language can write to an arbitrary path on the filesystem. The shim
includes a special IE_SaveFile
function to write binary strings to file. It
attempts to write to the Downloads folder or Documents folder or Desktop.
此方法不需要用户交互,但必须启用 ActiveX。它作为策略嵌入到 writeFile
中,并且仅当页面中包含 shim 脚本并且在目标系统上启用了相关功能时才使用。
¥This approach does not require user interaction, but ActiveX must be enabled. It
is embedded as a strategy in writeFile
and used only if the shim script is
included in the page and the relevant features are enabled on the target system.
构架
¥Frameworks
Dojo 工具包
¥Dojo Toolkit
¥The exposition has been moved to a separate page.
KnockoutJS
KnockoutJS 是一个流行的 MVVM 框架。
¥KnockoutJS was a popular MVVM framework.
在线演示 显示了使用文件数据更新并导出到电子表格的视图模型。
¥The Live demo shows a view model that is updated with file data and exported to spreadsheets.
Full Exposition (click to show)
State
Arrays of arrays are the simplest data structure for representing worksheets.
var aoa = [
[1, 2], // A1 = 1, B1 = 2
[3, 4] // A1 = 3, B1 = 4
];
ko.observableArray
should be used to create the view model:
function ViewModel() {
/* use an array of arrays */
this.aoa = ko.observableArray([ [1,2], [3,4] ]);
}
/* create model */
var model = new ViewModel();
ko.applyBindings(model);
XLSX.utils.sheet_to_json
with header: 1
generates data for the model:
/* starting from a `wb` workbook object, pull first worksheet */
var ws = wb.Sheets[wb.SheetNames[0]];
/* convert the worksheet to an array of arrays */
var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
/* update model */
model.aoa(aoa);
XLSX.utils.aoa_to_sheet
generates worksheets from the model:
var aoa = model.aoa();
var ws = XLSX.utils.aoa_to_sheet(aoa);
Data Binding
data-bind="foreach: ..."
provides a simple approach for binding to TABLE
:
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><span data-bind="text: $data"></span></td>
</tr>
</table>
Unfortunately the nested "foreach: $data"
binding is read-only. A two-way
binding is possible using the $parent
and $index
binding context properties:
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><input data-bind="value: $parent[$index()]" /></td>
</tr>
</table>
[^1]: 该项目没有单独的网站。源存储库托管在 GitHub 上
¥The project does not have a separate website. The source repository is hosted on GitHub