javascript - 在 AngularJS 应用程序中使用 XLSX 和 canvas-datagrid 可视化的 Excel 数据的预览在 Chrome 和 IE11 中均未绘制

Question

我在我的应用程序中获得了组件，除了从服务器加载一些初始数据 - 进入特定状态时 - 还有两个带有标签“预览文件”和“下载文件”的按钮。第一个按钮应执行以下方法：从服务器下载 .csv 文件 - 作为字节数组发送，因此它将作为 ArrayBuffer 接收 - 然后将其转换为 .xls 电子表格，并应以新的、缩放的、只读窗口。

第二个按钮应该执行：下载相同的文件，以相同的方式并将其转换为.xls后，将其下载到本地磁盘。

.csv 操作由 SheetJS js-XLSX 库管理，数据可视化由 canvas-datagrid 管理。

但是整个可视化步骤不起作用。

这是代码：

previewFile(idx) {
  const file = this.files[idx];
  const fileName = file.originalFileName;
  this.getFile(fileName).then( (data) => {
    const arrayBuffer = new Uint8Array(data);
    const sheetsObj = this.XLSX.read(arrayBuffer, {type: "array"});
    const sheetObj = sheetsObj.Sheets[sheetsObj.SheetNames[0]];
    const jsonObj = this.XLSX.utils.sheet_to_json(sheetObj, {header: ["Some header1", "Some header2", "Some header3"], raw: false});
    const previewGrid = this.canvasDataGrid();
    previewGrid.data = jsonObj;
    this.$document[0].getElementById('grid').appendChild(previewGrid);
  });
}

此代码下载并转换数据，但在尝试可视化时，它显示黑色画布矩形，带有默认 Chrome 浏览器的崩溃图标：

当我在 Internet Explorer 11 上尝试此操作时，我在开发控制台中收到此错误：

SyntaxError: Syntax error
    at Grid (eval code:1:12155)
    at window.canvasDatagrid (eval code:1:13638)
    at Anonymous function (eval code:198:9)
    at processQueue (eval code:16383:11)
    at Anonymous function (eval code:16399:27)
    at Scope.prototype.$eval (eval code:17682:9)
    at Scope.prototype.$digest (eval code:17495:15)
    at Scope.prototype.$apply (eval code:17790:13)
    at done (eval code:11831:36)
    at completeRequest (eval code:12033:7)

但是 canvas-datagrid 的文档说它在 IE11 上运行良好。

我想用“预览按钮”实现的是能够在新窗口中可视化 Excel 电子表格，缩放到 1000 像素 X 1000 像素，只读。

但没有办法不知道该怎么做。文档没有帮助我，看起来我的精神太慢了，无法自己更快地解决这个问题。

任何人都有使用 XLSX 和 canvas-datagrid 的经验并愿意提供帮助吗？

标签： javascriptexcelinternet-explorercanvasdata-visualization

Answer 1

我尝试检查您的代码，发现您的代码中包含 Internet Explorer 不支持的 '=>' [箭头函数]。

这就是它在控制台中显示语法错误的原因。

你需要将你的代码从 ES6 转换成 ES5，它可以与 Internet Explorer 一起使用。

您可以使用Babel将 ES6 转换为 ES5 代码。

参考：

箭头函数

我不确定您的代码与 Chrome 浏览器有什么问题。