Реальный двоичный массив - чистый внешний экспорт файлов Excel

внешний интерфейс Excel

В прошлом при работе, связанной с экспортом данных, люди использовали языки сценариев, такие как nodejs, ruby ​​и т. д., но все они зависели от среды. Как выполнить этот тип операции в среде браузера? Простое и совместимое решение приведено ниже.

Основные понятия Excel

Прежде чем экспортировать в Excel, давайте познакомимся с его основными понятиями:

  • Рабочая тетрадь Каждая рабочая книга соответствует файлу Excel.

  • Рабочий лист Файл Excel может содержать несколько рабочих листов одновременно.

использовать инструменты

На этот раз мы выберемSheetJSэкспортировать в эксель

Это библиотека для редактирования электронных таблиц, подходящая как для среды браузера, так и для среды Nodejs.Основные функции включают в себя:

  • Чтение и анализ файлов Excel
  • Изменить содержимое таблицы
  • Экспорт данных в виде файла Excel

Операционные процедуры

Использование SheetJS для экспорта файлов Excel можно условно разделить на следующие этапы:

Шаг 1. Организуйте данные

Во-первых, мы организуем данные для экспорта, рекомендуется использовать механизм шаблонов для их генерации и, наконец, сформировать узел таблицы, например:

    <table id="user_info">
    	<thead>
    		<tr>
    			<th>序号</th>
    			<th>名字</th>
    			<th>性别</th>
    			<th>爱好</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1</td>
    			<td>Alice</td>
    			<td>女</td>
    			<td>看电影</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>Zacks</td>
    			<td>男</td>
    			<td>看书</td>
    		</tr>
    	</tbody>
    </table>

Шаг 2. Используйте SheetJS для преобразования узла dom или html-текста в рабочую книгу.

// 生成一个新的workbook，然后往workbook追加worksheet
const cleanWorkbook = XLSX.utils.book_new();
const table = document.getElementById('user_info');
const worksheet = XLSX.utils.table_to_sheet(table);
XLSX.utils.book_append_sheet(cleanWorkbook, worksheet, "sheet2");

// 只需要一个worksheet的时候可以直接read method生成workbook,此时worksheet名称默认为"Sheet1"
const directWorkbook = XLSX.read(table.outerHTML, {
	type: 'string'
});

Шаг 3. Преобразуйте книгу в двоичный файл

const stringToArrayBuffer = function (string) {
	const buffer = new ArrayBuffer(string.length);
	const view = new Uint8Array(buffer);
	for (let i = 0, i !== string.length; ++i) {
		view[i] = string.charCodeAt(i) & 0xFF;
	}
	return buffer;
}
const ab = stringToArrayBuffer(XLSX.write(cleanWorkbook, {
	bookType: 'xlsx',
	type: 'binary'
}));
const tmpDown = new Blob([ab], { type: '' });

Шаг 4. Запустите автоматическую загрузку файла Excel

const a = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
a.href = URL.createObjectURL(tmpDown)  // 创建对象超链接
a.download = 'demo.xlsx';
a.click();

Таким образом, браузер автоматически загрузит сгенерированный файл Excel на локальный компьютер, и фактический эффект будет следующим.

двоичный массив

В приведенном выше примере мы используем ArrayBuffer для управления двоичными данными. Давайте кратко расширим его:

Студенты, которые использовали WebGL, должны знать, что это интерфейс связи между браузером и графической картой.Чтобы обеспечить большой обмен данными в режиме реального времени между JavaScript и графической картой, данные связи между ними должны быть двоичными, а не традиционный текст Формат. Если 32-битное целое передается в текстовом формате, преобразование данных должно быть выполнено на обоих концах, и потеря времени этой части не является незначительной.Поэтому зрение все еще может передавать двоичные данные напрямую.На этом фоне родился двоичный массив .

Он состоит из следующих трех частей:

  • Объект ArrayBuffer: представляет часть двоичных данных в памяти, но не может управляться напрямую. Обработка данных должна выполняться путем создания представления.
  • Объект TypedArray: сгенерируйте соответствующее представление памяти, передав экземпляр ArrayBuffer.Существует 9 форматов данных для представления, например: представление массива Uint8Array (8-разрядное целое число без знака), представление массива Int16Array (16-разрядное целое число), Float32Array ( 32-битное число с плавающей запятой)) представление массива.
  • Объект DataView: аналогичен объекту TypedArray, разница в том, что этот объект может настраивать формат и порядок байтов, например, первый байт — Uint8 (8-битное целое без знака), второй байт — Int16 (16-битное целое)), третий байт — это Float32 (32-битное число с плавающей запятой) и так далее.
const stringToArrayBuffer = function (string) {
    const buffer = new ArrayBuffer(string.length);
    const view = new Uint8Array(buffer);
    for (let i = 0, i !== string.length; ++i) {
        view[i] = string.charCodeAt(i) & 0xFF;
    }
    return buffer;
}

В этой функции преобразования мы сначала обращаемся за куском памяти, равным количеству байтов строки, которую нужно преобразовать через ArrayBuffer, а затем загружаем в эту память двоичные данные по байтам, создавая представление Uint8. относительно простой пример манипулирования бинарными данными js.

резюме

Благодаря приведенному выше введению мы можем обнаружить, что экспортировать данные из чистого внешнего интерфейса относительно просто. В повседневном использовании нам необходимо выбирать технологии для различных сценариев.С точки зрения стоимости построения архитектуры чистое решение для реализации внешнего интерфейса может выполнять экспорт данных, не полагаясь на возможности сервера и сети. Тем не менее, когда объем данных велик, с точки зрения производительности и удобства взаимодействия с пользователем будет более элегантным решением завершить его на стороне сервера.

Категории