xlsx插件将页面表格导出为xlsx文件格式简单案例

大脸胖柴

已于 2023-03-28 11:07:27 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签：前端 vue.js

于 2023-01-03 18:21:19 首次发布

本文链接：https://blog.csdn.net/TKY666/article/details/128537127

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例二引入代码文件dist_xlsx.full.min.js Git地址

前言

此案例未涉及到表格样式，只是做了简单的数据导出，所以简单易懂。

xlsx将表格数据导出的两种常用方式：（需根据具体场景判断使用）

直接将数据导出（默认推荐）
操作表格导出（若表格有分页状态，则导出数据可能只为当前页数据）

插件安装

首先安装插件xlsx

cnpm install  xlsx 或 cnpm install  xlsx
本文使用的版本为 npm install xlsx@0.17.1 --save

如果不是vue项目也可在其他vue项目安装xlsx然后在node_modules下的xlsx文件夹下找到dist文件夹下的xlsx.full.min.js，引入到项目中使用。

解决版本不兼容报错

补充：使用xlsx受环境影响导致可能会报错版本不兼容问题

解决方法：

将语法
import XLSX from 'xlsx'
改成
import * as XLSX from 'xlsx'

案例一代码

以下案例是以vue为基础编写（直接将数据导出）

<template>
    <div>
        <button @click="handelExportEvent">导出表格文件</button>
    </div>
</template>
<script>
import XLSX from "xlsx";
/**
 * @param dataList 表格数据内容  array
 * @param fileName 文件标题。必须以 .xlsx结尾
 */
export default {
    data() {
        return {
            tableData:[{name:'王二蛋',id:'231'},]
        }
    },
    methods: {
        downloadXlsx(dataList, fileName) {
            const stringToBuff = str => {
                let buf = new ArrayBuffer(str.length)
                let view = new Uint8Array(buf)
                for (let i = 0; i !== str.length; ++i) {
                    view[i] = str.charCodeAt(i) & 0xff
                }
                return buf
            };
            // 创建表格
            let workbook = XLSX.utils.book_new();
            let worksheet = XLSX.utils.aoa_to_sheet(dataList);
            XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');
            console.log(worksheet); // 初次使用可以观察下转换后的数据结构

            // 创建二进制对象写入转换好的字节流
            let xlsxBlob = new Blob(
                [
                    stringToBuff(
                        XLSX.write(workbook, {
                            bookType: 'xlsx',
                            bookSST: false,
                            type: 'binary'
                        })
                    )
                ],
                { type: '' }
            );

            const a = document.createElement('a');
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(xlsxBlob);// 创建对象超链接
            a.download = fileName
            a.click()
        },
        handelExportEvent() {
            //this.tableData表格数据
            if (this.tableData.length == 0) {
                this.$message.error("当前没有需要导出的数据，请重新搜索后再打印！");
                return;
            }
            let datalist = [];  //导出表格表头
            datalist.push([
                "标题1",
                "标题2",
            ]);

            this.tableData.forEach((item, index) => {
                datalist.push([
                    item.name,
                    item.id,
                ]);
            });
            // console.log(this.tableData);
            //导出插件使用
            this.downloadXlsx(datalist, "文件名.xlsx");
        },

    },
}
</script>

案例一效果

案例二代码

案例二是以h5为例（操作表格导出数据）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <table id="table1" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>兴趣</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td>打游戏</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>88</td>
        <td>看电影</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td>81</td>
        <td>睡觉</td>
      </tr>
    </tbody>
  </table>

  <button id="btn" onclick="btn_export()">导出</button>
</body>
<script src="dist_xlsx.full.min.js"></script>
<script>
  // ---------------------------------导出xlsx所需方法----------------------------------
  // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
      SheetNames: [sheetName],
      Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

    var wopts = {
      bookType: 'xlsx', // 要生成的文件类型
      bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
    }); // 字符串转ArrayBuffer
    function s2ab(s) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
    return blob;
  }

  function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
      url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
      event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
  }
  // -------------------------------获取表格导出数据操作-------------------------------
  function btn_export() {
    var table1 = document.querySelector("#table1");
    var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
    openDownloadDialog(sheet2blob(sheet), '下载.xlsx');
  }
</script>

</html>