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">
                <thead class="mainH">
                    <tr>
                        <td v-for="(item, index) in fileHeaders" :key="index">{
  {item}}</td>
                    </tr>
                </thead>
                <tbody class="mainB">
                    <tr v-for="(item, index) in fileData" :key="index+'1'">
                        <td v-for="(i, index) in item" :key="index+'2'">{
  {i}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import XLSX from 'xlsx';
export default {
    name:'File',
    data(){
        return {
            file: "",
            fileName: "",
            fileData: [],
            fileHeaders: []
        }
    },
    methods: {
        // 上传文件
        handleUpBtn(){
            this.$refs.refFile.click(); // 触发文件按钮点击事件
        },

        // 在文件按钮发生变化后处理上传的文件数据
        handleFiles(){
            let selectedFile = this.$refs.refFile.files[0]; 
            // selectedFile中可以获取到文件名和文件大小 selectedFile.name, selectedFile.size
            this.file = selectedFile;
            this.fileName = selectedFile.name;
            /*
                在得到selectedFile文件之后，可以直接将selectedFile文件通过接口传递到后端，进行文件内容的处理
                如果文件需要在前端进行处理，就需