Предварительный просмотр данных Excel, визуализированных с помощью XLSX и canvas-datagrid в приложении AngularJS, не прорисовывается ни в Chrome, ни в IE11 - PullRequest
Новая
       40

Предварительный просмотр данных Excel, визуализированных с помощью XLSX и canvas-datagrid в приложении AngularJS, не прорисовывается ни в Chrome, ни в IE11

0 голосов
/ 18 июня 2019

Я получил компонент в своем приложении, который помимо загрузки некоторых исходных данных с сервера - при входе в определенное состояние - имеет две кнопки с надписями «Предварительный просмотр файла» и «Загрузить файл». Первая кнопка должна выполнить метод, который будет: загрузить с сервера файл .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 по умолчанию:

blank canvas rectangle

И когда я пытаюсь сделать это в 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 пикселей на 1000 пикселей, только для чтения.

Но ни в коем случае не знаю, как это сделать. Документы мне не помогли, похоже, я слишком медленный, чтобы понять это быстрее.

Кто-нибудь имеет опыт работы с XLSX и canvas-datagrid и хотел бы помочь?

1 Ответ

0 голосов
/ 18 июня 2019

Я пытаюсь проверить ваш код и обнаружить, что в вашем коде есть '=>' [Функция стрелки], которая не поддерживается Internet Explorer.

enter image description here

По этой причине в консоли отображается синтаксическая ошибка.

Вам необходимо перенести свой код с ES6 на ES5, который может работать с Internet Explorer.

Вы можете использовать Babel для переноса кода ES6 в код ES5.

Справка:

Функции стрелок

Я не уверен, какая проблема связана с вашим кодом в браузере Chrome.

...