Vue项目中excel表格文件的导入、导出

目录

使用到的一些构造函数、插件

FileReader

Blob

js-xlsx

ElementUI组件库

导入的excel文件预览

导入文件不带自定义弹窗

导入文件带自定义弹窗

---

使用到的一些构造函数、插件

FileReader

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/FileReader

Blob

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

想要读取Blob数据的唯一方法是FileReader。 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

js-xlsx

链接：https://github.com/SheetJS/sheetjs/tree/master/demos/vue

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

npm install xlsx  // 安装

import XLSX from 'xlsx'; // 导入

ElementUI组件库

链接：https://element.eleme.cn/#/zh-CN/component/installation

导入文件的弹窗使用到了el-dialog组件

导入的excel文件预览

导入文件不带自定义弹窗

<template>
    <div id='File'>
        <button class="file-btn" @click="handleUpBtn">
            <span>导入</span>
            <input type="file" ref="refFile" style="display: none" @change="handleFiles" >
        </button>
        <button class="file-btn" @click="handleDownBtn"><span>导出</span></button>
        <div class="container">
            <table class="main">
                <t