JavaScript实现excel文件导入导出

目录
  • 一、需求场景描述
    • 1.此时前端上传解析excel文件可能更合适
    • 2.此时前端下载excel文件可能优雅一些
  • 二、实现思路分析
    • 1.导入excel文件实现思路分析
    • 2.导出excel文件实现思路分析
  • 三、关键代码
    • 1. exportExcel.js 导出excel文件
    • 2. importExcel.js 导入excel文件
  • 四、使用示例
    • 1.使用示例一:上传解析excel
    • 2.使用示例二:下载excel文件

一、需求场景描述

文件的导入导出是非常常见的需求功能,excel文件的导入导出更为常见,实践中许多时候,是调用接口实现导入导出的,也就是说将文件导入导出的逻辑交给后端去做了。但是,有的时候确也需要前端自行实现导入导出,此时前端实现导入导出可能是更好的选择。

1.此时前端上传解析excel文件可能更合适

例如,一个常规excel文件填写模板,在用户的电脑上,用户上传完后,还可以在预览展示时,在线修改,改完可以下载,也可以将数据给到服务端,但这时,比如这模板数据通常不多,比如是一个团队成员这样的数据,通过文件流的形式传给后端,可能不是很理想,倒不如前端解析传那几行数据就行。

这种场景下,需要前端做到上传并解析excel文件。

2.此时前端下载excel文件可能优雅一些

支持用户动态增减筛选数据的界面,由于这种频繁的变更不是实时变更到服务器的,因此服务器其实没有存有刚刚用户的增减筛选的操作结果,此时由于前端主导下载可能更合适。当然,把操作的最终结果更新到服务器再告知服务器提供下载也是可行的。

这种场景下,需要前端做到过滤解析数据,然后做excel文件的下载。

实践效果图如下:

二、实现思路分析

1.导入excel文件实现思路分析

  • 1.使用html支持上传标签从本地获取文件,例如type为file的input,el-upload等。
  • 2.利用FileReader将文件读取为二进制字符串。
  • 3.使用XLSX插件的XLSX.read()方法,将二进制字符串转换成excel文件的工作蒲对象workbook(简写成wb)。
  • 4.通过XLSX.utils.sheet_to_json()方法,从wb中获取第一张 Sheets表格数据并将其转换为json数据。
  • 5.重组json数据生成数组,即是根据自己的定义的列字段名,重新组成符合自己需求的json数据。因为从excel中提取的数据是没有字段名或字段名不符合要求的,

而我们需要渲染在页面表格中又确实需要合适的字段名。

2.导出excel文件实现思路分析

  • 1.通过XLSX插件的 XLSX.utils.book_new()方法,创建excel工作蒲对象wb。
  • 2.按需插入第一行数据,通过数组的unshift()方法。
  • 3.通过XLSX.utils.json_to_sheet(),创建excel表格对象ws。
  • 4.通过json_to_array(key,data),结合自定义的字段名key,和数据记录data,生成新数组。
  • 5.通过auto_width(),对ws和新生成的数组,自动计算各列col宽。
  • 6.通过XLSX.utils.book_append_sheet(),生成实际excel工作蒲,并使用XLSX.writeFile()生成excel文件。

三、关键代码

1. exportExcel.js 导出excel文件

/* eslint-disable */
/* 导出excel文件 */

/**
 * 导出excel文件实现思路分析
 *
 * 1.通过XLSX插件的 XLSX.utils.book_new()方法,创建excel工作蒲对象wb。
 * 2.按需插入第一行数据,通过数组的unshift()方法。
 * 3.通过XLSX.utils.json_to_sheet(),创建excel表格对象ws。
 * 4.通过json_to_array(key,data),结合自定义的字段名key,和数据记录data,生成新数组。
 * 5.通过auto_width(),对ws和新生成的数组,自动计算各列col宽。
 * 6.通过XLSX.utils.book_append_sheet(),生成实际excel工作蒲,并使用XLSX.writeFile()生成excel文件。
 */

import XLSX from 'xlsx'

// 自动计算col列宽
function auto_width (ws, data) {
  /*set worksheet max width per col*/
  const colWidth = data.map(row => row.map(val => {
    /*if null/undefined*/
    if (val == null) {
      return { 'wch': 10 }
    }
    /*if chinese*/
    else if (val.toString().charCodeAt(0) > 255) {
      return { 'wch': val.toString().length * 2 }
    } else {
      return { 'wch': val.toString().length }
    }
  }))
  /*start in the first row*/
  let result = colWidth[0]
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j]['wch'] < colWidth[i][j]['wch']) {
        result[j]['wch'] = colWidth[i][j]['wch']
      }
    }
  }
  ws['!cols'] = result
}

// 将json数据转换成数组
function json_to_array (key, jsonData) {
  return jsonData.map(v => key.map(j => {
    return v[j]
  }))
}

/**
 * @param header Object,表头
 * @param data Array,表体数据
 * @param key Array,字段名
 * @param title String,标题(会居中显示),即excel表格第一行
 * @param filename String,文件名
 * @param autoWidth Boolean,是否自动根据key自定义列宽度
 */
export const exportJsonToExcel = ({
  header,
  data,
  key,
  title,
  filename,
  autoWidth
}) => {
  const wb = XLSX.utils.book_new()
  if (header) {
    data.unshift(header)
  }
  if (title) {
    data.unshift(title)
  }
  const ws = XLSX.utils.json_to_sheet(data, {
    header: key,
    skipHeader: true
  })
  if (autoWidth) {
    const arr = json_to_array(key, data)
    auto_width(ws, arr)
  }
  XLSX.utils.book_append_sheet(wb, ws, filename)
  XLSX.writeFile(wb, filename + '.xlsx')
}
export default {
  exportJsonToExcel
}

2. importExcel.js 导入excel文件

/* eslint-disable */
/* 导入excel文件 */

/**
 * 导入excel文件实现思路分析
 *
 * 1.使用html支持上传标签从本地获取文件,例如type为file的input,el-upload等。
 * 2.利用FileReader将文件读取为二进制字符串。
 * 3.使用XLSX插件的XLSX.read()方法,将二进制字符串转换成excel文件的工作蒲对象workbook(简写成wb)。
 * 4.通过XLSX.utils.sheet_to_json()方法,从wb中获取第一张 Sheets表格数据并将其转换为json数据。
 * 5.重组json数据生成数组,即是根据自己的定义的列字段名,重新组成符合自己需求的json数据。因为从excel中提取的数据是没有字段名或字段名不符合要求的,
 * 而我们需要渲染在页面表格中又确实需要合适的字段名。
 */

/**
 * @param file 文件流
 * @param tableTemplate 要导入的表格模板,一个数组,如:
 * tableTemplate: ['userCode', 'userName', 'department', 'major', 'position'],其中的值
 * 为表格的字段名,注意字段的顺序应与实际的导入excel一致。
 */
export default function importExcel (file, tableTemplate) {
  return new Promise((resolve, reject) => {
    let f = file.raw // 获取文件内容
    // 通过DOM取文件数据
    let rABS = false // 是否将文件读取为二进制字符串
    let reader = new FileReader()
    FileReader.prototype.readAsBinaryString = function (f) {
      let binary = ''
      let rABS = false // 是否将文件读取为二进制字符串
      let wb // 读取完成的数据
      let outdata
      let reader = new FileReader()
      reader.onload = function (e) {
        let bytes = new Uint8Array(reader.result)
        let length = bytes.byteLength
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        let XLSX = require('xlsx')
        if (rABS) {
          wb = XLSX.read(btoa(binary), { // 手动转化
            type: 'base64'
          })
        } else {
          wb = XLSX.read(binary, {
            type: 'binary'
          })
        }
        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) // outdata就是表格中的值

        let arr = []
        // 下面是数据解析提取逻辑
        if (tableTemplate.length > 0) {
          let tempArr = Object.keys(outdata[0])
          let tempArrNew = []
          for (let i in tempArr) {
            for (let k in tableTemplate) {
              if (i === k) {
                tempArrNew.push({fieldE: tableTemplate[k], fieldC: tempArr[i]})
              }
            }
          }

          tempArr = tempArrNew
          outdata.map(item => {
            let obj = {}
            tempArr.map(temp2 => {
              obj[temp2.fieldE] = item[temp2.fieldC]
            })
            arr.push(obj)
          })
        }

        resolve(arr)
      }
      reader.readAsArrayBuffer(f)
    }

    if (rABS) {
      reader.readAsArrayBuffer(f)
    } else {
      reader.readAsBinaryString(f)
    }
  })
}

四、使用示例

1.使用示例一:上传解析excel

关键 html 代码部分

<el-upload
        action=""
        id="upload-excel"
        :on-change="handleChange"
        :show-file-list="false"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="false">
</el-upload>

<el-table
        class="cn-table-th-bg"
        size="small"
        :data="tableData"
        border
        style="width: 100%">
    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
    <el-table-column prop="userSource" label="来源" align="center"></el-table-column>
    <el-table-column prop="userCode" label="工号" align="center"></el-table-column>
    <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
    <el-table-column prop="department" label="部门" align="center"></el-table-column>
    <el-table-column prop="major" label="专业" align="center"></el-table-column>
    <el-table-column prop="position" label="职务/职称" align="center"></el-table-column>
    <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
            <el-button @click="clickDelete(scope.row)" size="mini">删除</el-button>
            <el-button @click="moveUp(tableData,scope.$index)" size="mini" class="up-button">上移</el-button>
            <el-button @click="moveDown(tableData,scope.$index)" size="mini" class="down-button">下移</el-button>
        </template>
    </el-table-column>
</el-table>

// 关键 js 代码部分

import importExcel from '@/utils/excel/importExcel'

handleChange (file, fileList) {
    tableField: ['userCode', 'userName', 'department', 'major', 'position'],
    importExcel(file, tableField).then(res => {
       this.tableData = res
   })
}

2.使用示例二:下载excel文件

关键 js 代码

import { exportJsonToExcel } from '@/utils/excel/exportExcel'

clickDownload () {
        const tableField = ['userCode', 'userName', 'department', 'major', 'position'],
            tableHeader = {userCode: '工号', userName: '姓名', department: '部门', major: '专业', position: '职位/职称'},
            tableTitle = '导出表格',
            templateData = [
              {'userCode': 'N1001', 'userName': '张三', 'department': '综合管理部', 'major': '计算机科学与技术', 'position': '项目经理'}
            ],
            obj = {
              header: tableHeader,
              data: templateData,
              key: tableField,
              title: '',
              filename: '团队成员导入模板',
              autoWidth: true
           }
        exportJsonToExcel(obj)
},

到此这篇关于JavaScript实现excel文件导入导出的文章就介绍到这了,更多相关JS文件导入导出内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS实现导出Excel和CSV文件操作

    一.js导出Excel <html> <head> </head> <body> <script type="text/javascript" src="./xlsx.core.min.js"></script> <script type="text/javascript"> /** * 通用的打开下载对话框方法,没有测试过具体兼容性 * @param url 下

  • JS兼容浏览器的导出Excel(CSV)文件的方法

    Js导出表格为Excel文件 的常见一种办法是调用:ActiveXObject("Excel.Application") ,但是这种方法有局限性,只能在IE系列下的浏览器里实现,兼容性方面不理想. 经测试,采用本文推荐的方法能兼容性较好的导出表格内容到Excel文件. 复制代码 代码如下: var str = "博客, 域名\nBlog, 2\njb51.net, 3";var uri = 'data:text/csv;charset=utf-8,' + str;

  • Jsp中的table多表头导出excel文件具体实现

    首先引入两份JS:copyhtmltoexcel.js以及 tableToExcel.js 复制代码 代码如下: /*  * 默认转换实现函数,如果需要其他功能,需自行扩展 * 参数: *      tableID : HTML中Table对象id属性值 * 详细用法参见以下 TableToExcel 对象定义   */function saveAsExcel(tableID){ var tb = new TableToExcel(tableID);  tb.setFontStyle("Cour

  • javascript导出csv文件(excel)的方法示例

    这里贴出JavaScript导出csv文件(excel)的代码. /** * 导出excel * @param {Object} title 标题列key-val * @param {Object} data 值列key-val * @param {Object} fileName 文件名称 */ function JSONToExcelConvertor(title, data, fileName) { var CSV = ''; var row = ""; for (var i =

  • js导出excel文件的简洁方法(推荐)

    用js可以直接在jsp页面导出数据到excel文件,方法很简洁,如下: 第一,准备一个jsp(暂时取名为export.jsp),内容为: <%@ page contentType="text/html; charset=GBK"%> <% String context = request.getParameter("sContent"); response.setHeader("Content-type","appli

  • JSP导出Excel文件的方法

    本文实例讲述了JSP导出Excel文件的方法.分享给大家供大家参考,具体如下: <%@page import="jxl.Workbook,com.ecc.emp.core.*,com.ecc.emp.data.*,com.ecc.emp.jdbc.ConnectionManager,jxl.format.VerticalAlignment,java.sql.*,jxl.write.*,jxl.format.UnderlineStyle,javax.sql.DataSource"%

  • js基于FileSaver.js 浏览器导出Excel文件的示例

    本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes

  • EasyUI 结合JS导出Excel文件的实现方法

    废话俺就少说了,直接进入正题!!单纯的JS能够导出Excel的不多见,一般都需要调用客户端所安装的Office Excel组件来完成这个工作.这里我主要讲EasyUI内的DataGrid如何结合JS导出Excel文件 一. 导出Excel的核心代码段如下所示 function Exproter() { //获取Datagride的列 var rows = $('#test').datagrid('getRows'); var oXL = new ActiveXObject("Excel.Appl

  • JavaScript实现excel文件导入导出

    目录 一.需求场景描述 1.此时前端上传解析excel文件可能更合适 2.此时前端下载excel文件可能优雅一些 二.实现思路分析 1.导入excel文件实现思路分析 2.导出excel文件实现思路分析 三.关键代码 1. exportExcel.js 导出excel文件 2. importExcel.js 导入excel文件 四.使用示例 1.使用示例一:上传解析excel 2.使用示例二:下载excel文件 一.需求场景描述 文件的导入导出是非常常见的需求功能,excel文件的导入导出更为常

  • Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解

    1.简介 本文主要给大家介绍了关于Laravel 5用Laravel Excel实现Excel/CSV文件导入导出的相关内容,下面话不多说了,来一起看看详细的介绍吧. Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和 导出 . 该项目的GitHub地址是: https://github.com/Maatwebsite/Laravel-Excel. 本地下载地址:h

  • java实现文件导入导出

    文件导入导出必须代码 ExportExcel.java /** * Copyright © 2012-2014 <a href="https://github.com/thinkgem/jeesite">JeeSite</a> All rights reserved. */ package com.thinkgem.jeesite.common.utils.excel; import java.io.FileNotFoundException; import j

  • ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例

    本文所述实例是使用在Thinkphp的开发框架上,要是使用在其他框架也是同样的方法,很多人可能不能正确的实现Excel的导入导出,问题基本上都是phpExcel的核心类引用路径出错造成的,如果有问题大家务必要对路劲是否引用正确进行测试. 具体操作步骤如下: (一)导入Excel 第一,在前台html页面进行上传文件:如: <form method="post" action="php文件" enctype="multipart/form-data&q

  • SpringBoot整合EasyExcel实现文件导入导出

    准备工作 注意:点击查看官网Demo 1. 引入pom依赖 <!--easyExcel--> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> </dependency> 2. 实现功能 结合Vue前端,实现浏览器页面直接导出日志文件 实现文件的导入 Excel文件下载 3. 日志实体类 实体类里有自定义转换器:用于

  • PHP上传Excel文件导入数据到MySQL数据库示例

    最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里面的数据内容到MySQL数据库的小程序. 要用到的工具: ThinkPHP:轻量级国产PHP开发框架.可在ThinkPHP官网下载. PHPExcel:Office Excel 文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可在CodePlex官网下载.. 1.设计MySQL数据库product 创建product数据库 CREATE DATABASE product D

  • 如何将Excel文件导入MySQL数据库

    本文实例为大家分享了Excel文件导入MySQL数据库的方法,供大家参考,具体内容如下 1.简介 本博客给大家分享一个实用的小技能,我们在使用数据库时常常需要将所需的Excel数据添加进去,如果按照传统的方法将会费时费力,所以给大家分享导入Excel数据的技能. 2.实际操作 1)首先需要下载一个数据库管理工具名为Navicat for MySQL,可以通过以下网址下载Navicat for MySQL,下载安装完成后即可进行操作: 2)我以一个CET-6的词汇表为例进行讲解,该词汇表内容部分截

  • java实现Excel的导入导出

    本文实例为大家分享了java实现Excel导入导出的具体代码,供大家参考,具体内容如下 一.Excel读写技术 区别: 二.jxl读写基础代码 1.从数据库将数据导出到excel表格 public class JxlExcel { public static void main(String[] args) { //创建Excel文件 String[] title= {"姓名","课程名","分数"}; File file=new File(&q

  • SpringBoot中EasyExcel实现Excel文件的导入导出

    前言 在我们日常的开发过程中经常会使用Excel文件的形式来批量地上传下载系统数据,我们最常用的工具是Apache poi,但是如果数据到底上百万时,将会造成内存溢出的问题,那么我们怎么去实现百万数据批量导入导出. 正文 Easyexcel Easyexcel 是阿里巴巴的开源项目,用来优化Excel文件处理过程: poi消耗内存严重:Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的

  • ASP.NET Core 导入导出Excel xlsx 文件实例

    ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Linux和Mac. EPPlus.Core 是基于EPPlus 更改而来,在Linux 下需要安装libgdiplus . EPPlus:http://epplus.codeplex.com/ EPPlus.Core:https://github.com/VahidN/EPPlus.Core 下面在A

随机推荐