Чтобы прочитать файл xlsx, расположенный в общей папке проекта vuejs
Я пытаюсь прочитать шаблон теста, содержащийся в файле xlsx, чтобы впоследствии создать тест, содержащийся в шаблоне.
Хранение xlsx как json в базе данных не вариант.
Я пытался использовать библиотеку xlsx для непосредственного чтения файла из общедоступного файла, но это не сработало, поскольку путь к файлу не был найден, и, просматривая документацию, я обнаружил, что браузеры обычно не позволяют чтение файлов таким способом, поскольку это считается угрозой безопасности.
Есть ли способ читать файлы xlsx, содержащиеся непосредственно в общедоступном каталоге?
Вот что я попробовал:
handleFile() {
const workbook = XLSX.readFile('/xlsx/quiztemplate.xlsx')
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const excelData = XLSX.utils.sheet_to_json(worksheet)
console.info(excelData)
}
и вот ошибка:
Необнаруженная ошибка: невозможно получить доступ к файлу /quiz/quiztemplate.xlsx.
Я проверил путь тысячу раз, поэтому не думаю, что проблема в пути. В документации говорится, что браузеры не поддерживают эту функцию, но я не уверен, что это действительно проблема, поскольку функция не отвергается полностью, она все равно пытается прочитать файл.
в каком каталоге ищет XLSX.readFile(), если используется клиентская сторона? Потому что мой код не вернул ошибку, кроме ошибки «файл не найден», что указывает на то, что он все еще где-то ищет?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
XLSX.readFile() предназначен для использования в серверных средах (Node.js).
Попробуйте использовать это:
npm install xlsx
Поскольку вы не можете использовать readFile() непосредственно в браузере, вам необходимо получить файл как большой двоичный объект, а затем обработать его.
<template>
<div>
<button @click = "handleFile">Load Quiz</button>
</div>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
methods: {
async handleFile() {
try {
const response = await fetch('/xlsx/quiztemplate.xlsx');
const data = await response.arrayBuffer();
const workbook = XLSX.read(data, { type: 'array' });
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const excelData = XLSX.utils.sheet_to_json(worksheet);
console.info(excelData);
} catch (error) {
console.error("Error reading the Excel file:", error);
}
}
}
}
</script>
Просто чтобы объяснить:
вы можете использовать API-интерфейс выборки для получения файла из общедоступного каталога. поэтому путь к файлу указывается относительно корня вашего общедоступного каталога в структуре вашего проекта Vue.js.
поэтому вы конвертируете полученные данные в ArrayBuffer. но почему? Потому что файл Excel является двоичным файлом, и именно так вы можете обрабатывать двоичные данные в JavaScript на стороне клиента.
Используйте XLSX.read() из библиотеки xlsx для анализа двоичных данных. Параметру типа присвоено значение «массив», чтобы указать, что входные данные представляют собой буфер массива.
а после извлеките необходимый лист и преобразуйте его в формат JSON, как вы уже задумали.
спасибо за быстрый ответ, завтра утром попробую и буду держать вас в курсе
вам придется адаптировать свой подход из-за ограничений, которые браузеры накладывают на операции чтения файлов. XLSX.readFile() предназначен для использования в серверных средах (Node.js), где доступна файловая система, а не в клиентском JavaScript.