csv и excel чтение и загрузка

внешний интерфейс JavaScript Excel Vue.js
csv и excel чтение и загрузка

В html5 DOM добавляет в файл коллекцию файлов.В выбранном файле файлы содержат объект File, и каждый объект имеет следующие свойства:

  • name: имя локального файла
  • размер: размер файла
  • TYPE: строка, тип файла MIME
  • LastModiDedDate: String, в последний раз файл был изменен

В то же время, используя объект FileReader, веб-приложение может асинхронно считывать содержимое файла (или буфера необработанных данных), хранящегося на компьютере пользователя, и может использовать объект File или объект Blob для указания файла или данных, подлежащих обработке. . FileReader предоставляет следующие методы.

  • readAsText(file,encoding): чтение файла в виде обычного текста и сохранение прочитанного текста в свойстве результата. Второй параметр используется для указания типа кодирования и является необязательным.
  • readAsDataURL(file): считывает файл и сохраняет его как URI данных в свойстве результата.
  • readAsBinaryString(file): считывает файл и сохраняет строку в свойстве результата, где каждый символ в строке представляет собой байт.
  • readAsArrayBuffer(file): читает файл и сохраняет ArrayBuffer, содержащий содержимое файла, в свойстве результата. Эти методы чтения файлов очень удобны для гибкой обработки файловых данных. Например, файл изображения можно прочитать и сохранить как URI данных, чтобы его можно было отобразить пользователю, или файл можно прочитать как текст для удобства синтаксического анализа.

Возьмем пример

Требования: Если читаемый файл является изображением, то оно будет отображаться как img, а в остальных случаях будет выводиться в виде текста.

  1. Чтобы прочитать файл, вам сначала нужен элемент ввода
<input type="file" id="files-list">
  1. Затем, если прочитанный файл является изображением, используйте readAsDataURL, чтобы преобразовать его в изображение, иначе преобразуйте в текст. Соответствующий результат преобразования будет сохранен в файле result.
reader = new FileReader();
if (/image/.test(files[0].type)) {
    // 选择文件类型为图片
    reader.readAsDataURL(files[0]);
    type = "image";
} else {
    // 其他文件类型，并指定编码类型
    reader.readAsText(files[0], 'gb2312');
    type = "text";
}
  1. После завершения чтения изображение выводится с помощью тега img, если это текст, то оно монтируется на страницу
reader.onload = function () {
    var html = "";
    switch (type) {
        case "image":
            html = "<img src=\"" + reader.result + "\">";
            break;
        case "text":
            html = reader.result;
            console.log(html);
            break;
    }
    output.innerHTML = html;
};

демонстрационная ссылка

читать изображение

читать CSV-файл

在利用readAsText进行读取的时候，要指定一下编码形式。如readAsText(files[0], 'gb2312');

CSV импорт

csv文件的特点： 每一行用换行符进行分隔，每一行的数据中每一项利用逗号分隔。

Вышеприведенное уже может выводить csv в виде текста. Спуститесь вниз и продолжайте получать данные.

Используя характеристики csv, упомянутые выше, вы можете использовать js для циклического прохождения, чтобы получить данные каждого элемента.

демонстрационная ссылка

Среди них я преобразовал данные в CVS и прописал их в элементе таблицы:

// 将读取的数据转化为table
function textToCsv(data) {
    var allRows = data.split(/\n/);
    var table = '<table>';
    for (var singleRow = 0; singleRow < allRows.length - 1; singleRow++) {
        if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
        } else {
            table += '<tr>';
        }
        var rowCells = allRows[singleRow].split(',');
        for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
                // 表格的标题
                table += '<th>';
                table += rowCells[rowCell];
                table += '</th>';
            } else {
                // 表格内容
                table += '<td>';
                table += rowCells[rowCell];
                table += '</td>';
            }
        }
        if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
        } else {
            table += '</tr>';
        }
    }
    table += '</tbody>';
    table += '</table>';
    console.log(table);
    document.getElementById('table').innerHTML = table;
}

Схема эффекта выглядит следующим образом:

Так как они все зачитаны, скачать?

Что касается операции загрузки, вы можете использовать тег a. Сначала введите соответствующие свойства:

  • загрузка: используется для указания имени файла для загрузки
  • href: ссылка на загружаемый файл (должна быть локальная ссылка)

Загрузка предыдущего столбца заключается в использовании вышеуказанного метода:

<a href="./file/会员.csv" download="demo.csv">下载测试文件</a>

Сначала подготовьте данные Данные заголовка CSV-файла:

var head = [
    ['姓名（最多10个字）', '手机号（必填）', '等级', '生日（比如：1989/08/08 或 1989-08-08）', '积分（限整数）']
];

Данные тела файла csv:

var people = [{
    "name": "吴三桂",
    "phone": "18709237410",
    "level": "黄金",
    "birthday": "1989/8/5",
    "points": "100"
}, {
    "name": "史泰龙",
    "phone": "18709237401",
    "level": "青铜2",
    "birthday": "1993/9/6",
    "points": "300"
}, {
    "name": "阿超",
    "phone": "18883920287",
    "level": "白金",
    "birthday": "1993/9/3",
    "points": "500"
}];

Ниже приведено преобразование формата данных:

//. 将数据push到大数组中 
var p = people;
for (var i = 0; i < p.length; i++) {
    head.push([p[i].name, p[i].phone, p[i].level, p[i].birthday, p[i].points]);
}
// 按照csv文件内容格式，把每个数组用 , 连接，形成一行，并存入新数组 
var csvRows = [];
for (var j = 0; j < head.length; j++) {
    csvRows.push(head[j].join(','))
}
//s4. 把新数组用 \n 回车连接 
var csvString = csvRows.join('\n');

Наконец реализовать загрузку:

//利用a标签实现下载
function saveAs(obj, fileName) { 
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下载.csv";
    tmpa.href ='data:attachment/csv,' + encodeURI(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载
    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);
}

демонстрационная ссылка
визуализация

Кроме того, Преобразование файла json в формат csv можно использоватьjson2csv

будет использоваться нижеjs-xlsxДля работы с CSV-файлом:

Чтение файлов Excel

XLSX, связанные с API:

  • Метод XLSX.utils.sheet_to_json анализирует объект таблицы и возвращает соответствующие данные JSON.
  • XLSX.read() читает данные excel в двоичном потоке

В JavaScript есть две функции для декодирования и кодирования строк base64:

  • Функция atob() способна декодировать строковые данные в кодировке base-64.
  • Функция btoa() может создать строку ASCII в кодировке base-64 из «строки» двоичных данных.

шаг:

  1. readAsArrayBuffer может преобразовывать прочитанные данные в двоичные данные;
  2. Преобразуйте данные в формат base64 через btoa();
  3. Затем объедините XLSX.utils.sheet_to_json для преобразования в json.
var wb;//读取完成的数据
 //导入
function importf(obj) {
    if (!obj.files) {
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(f);
    reader.onload = function (e) {
        var data = e.target.result;
        var wb =XLSX.read(btoa(fixedData(data)), { type: 'base64' });//将数据转化为二进制
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        document.getElementById("excel").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
    };

}

//文件流转BinaryString
function fixedData(data) {
    let o = ''
    let l = 0
    const w = 10240
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w,
        l * w + w)))
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
    return o
}

Предварительный просмотр рендеринга:

Посмотреть демо

Прикрепите исходный код vue-element-admin для чтения файлов Excel:Посмотреть ссылку

Экспорт файла Excel

Здесь по-прежнему будет использоваться js-xlsx, а для загрузки файлов используется FileSaver.js.

 <button onclick="downloadExl(people)">导出</button>
  1. подготовка данных
 var people = [{
    "name": "吴三桂",
    "phone": "18709237410",
    "level": "黄金",
    "birthday": "1989/8/5",
    "points": "100"
}, {
    "name": "史泰龙",
    "phone": "18709237401",
    "level": "青铜2",
    "birthday": "1993/9/6",
    "points": "300"
}, {
    "name": "阿超",
    "phone": "18883920287",
    "level": "白金",
    "birthday": "1993/9/3",
    "points": "500"
}];

Давайте определим wb для сохранения экспортированных данных

var wb = {
  SheetNames: ["Sheet1"],   //标题名
  Sheets: { }               //保存表内的数据
}
  1. XLSX.utils.json_to_sheet(people): вы можете преобразовывать json-объекты в рабочие листы, назначая результат преобразования не-wb.Sheets['Sheet1']

!ref: указывает диапазон вывода таблицы
A1-ZX: соответствуют расположению ячеек в Excel;

Среди них: Введение параметров, связанных с Sheet1:

имя ключа стоимость
v Исходное значение
t b логическое значение, e ошибка, n число, d дата, s текст

Для получения дополнительных свойств см.:официальная документация

  1. Укажите формат экспорта, здесь используется формат xlsx
 const wopts = { bookType: 'xlsx', bookSST: false,type: 'binary' };
//这里的数据是用来定义导出的格式类型
// const wopts = { bookType: 'csv', bookSST: false, type: 'binary' };//ods格式
// const wopts = { bookType: 'ods', bookSST: false, type: 'binary' };//ods格式
// const wopts = { bookType: 'xlsb', bookSST: false, type: 'binary' };//xlsb格式
// const wopts = { bookType: 'fods', bookSST: false, type: 'binary' };//fods格式
// const wopts = { bookType: 'biff2', bookSST: false, type: 'binary' };//xls格式
  1. Установите заголовок Замените A1-Z1 рабочего листа на китайский язык
// 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
function getCharCol(n) {
    var temCol = '',
        s = '',
        m = 0
    while (n >= 0) {
        m = n % 26 + 1
        s = String.fromCharCode(m + 64) + s
        n = (n - m) / 26
    }
    return s
};
["ID","手机号","等级" ,"生日","积分"].forEach((v,i)=>{data[getCharCol(i)+1] = { t: "s", v: v ,w:v};})
  1. скачать сохранить,

Используйте XLSX.write(wb, wopts);
wb: поток двоичных данных
wopts: указанный формат экспорта и другая информация

Скачайте и сохраните на этот раз без использования тега. использоватьFileSaver.js

saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], {type: "application/octet-stream"}), "js-xlsx文件下载实例" + '.' + wopts.bookType);

Посмотреть демо

Новички публикуют впервые, просьба не распыляться! ! !

github

Справочная статья:

  1. Понимание типов данных DOMString, Document, FormData, Blob, File, ArrayBuffer -- Чжан Синьсюй
  2. Манипуляции с файлами и двоичными данными — Ифэн Жуан
Категории