Добрый день. Не так давно понадобилось загрузить файл excel в приложение nuxt и сохранить его в базу данных supabase для дальнейшего использования.
В этой статье не буду рассказывать как поставить приложение Nuxt 3 и Supabase т.к. это было уже в предыдущих статьях.
Итак, приступим.
Создаем файл с любым названием в папке pages нашего приложения. В нем сразу же вставляем такой код:
<template>
<div>
<input type="file" @change="addfile" />
</div>
</template>
Тут мы просто сделали кнопку без всяких стилей для загрузки нашего файла и добавили на эту кнопку функцию addfile.
Далее командой npm i xlsx устанавливаем модуль для работы с файлами эксель.
Далее импортируем этот модуль в наш файл и объявляем переменные
<script setup>
import * as XLSX from "xlsx";
const supabase = useSupabaseClient();
let file = ref(null);
let arrayBuffer = ref("");
let filelist = ref(null);
let tablexls = ref(null);
Теперь нам нужно добавить саму функцию addfile, которая у нас висит на кнопке.
async function addfile(event) {
console.log(event.target.files[0]);
file.value = event.target.files[0];
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(file.value);
fileReader.onload = async (e) => {
arrayBuffer.value = fileReader.result;
var data = new Uint8Array(arrayBuffer.value);
var arr = new Array();
for (var i = 0; i != data.length; ++i)
arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, { type: "binary" });
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
filelist = XLSX.utils.sheet_to_json(worksheet, { raw: true });
var arraylist = XLSX.utils.sheet_to_json(worksheet, { raw: true });
let index;
for (index = 0; index < filelist.length; ++index) {
const { data, error } = await supabase.from("xls").insert([
{
table: [filelist[index]],
},
]);
if (error) console.log(error);
}
};
};
В этой функции подгружаемый файл конвертируется в формат JSON и записывается в нашу базу данных Supabase построчно в таблицу XLS.
Далее мы добавим функцию, которая достает записанные данные из таблицы:
async function getTable() {
let { data, error } = await supabase
.from("xls")
.select("*")
tablexls.value = data;
if (error) throw error;
}
И запишем извлекаемые данные в переменную tablexls.
Теперь все наши данные из таблицы хранятся в массиве объектов tablexls. С ним можно работать, извлекать данные, вносить новые и изменять.
На этом все. Спасибо за прочтение статьи. Если статья была полезной, подписывайтесь на канал.