Vue 使用Excel表格导入导出

最新推荐文章于 2023-12-27 09:00:00 发布

爱喝可乐的彬仔

最新推荐文章于 2023-12-27 09:00:00 发布

阅读量6.4k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_40999496/article/details/122506071

版权

vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

前言

在vue中，导入导出表格在现在的项目中是很常见的需求。我使用的是SheetJS js-xlsx。

中文文档：https://github.com/rockboom/SheetJS-docs-zh-CN

由于我公司用的导出较多，我就重点记录导出功能。

导出功能有两种方法：1、后端返回文件流，然后我们将其下载下来 2、我们本地自己将数据转换成数组的形式，然后下载下来

一、SheetJS js-xlsx是什么？

SheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健，其跨格式的特点和统一的JS规范兼容，并且ES3/ES5浏览器向后兼容IE6。

二、使用步骤

1.引入库

// 电子表格格式的解析器
npm install xlsx --save

// 用来生成文件的web应用程序
npm install -S file-saver

// 将js挂在在全局下
npm install -D script-loader

// xlsx样式 不需要样式可以不用
npm i xlsx-style

npm i xlsx-style安装完在使用的时候会报错

解决方法：在vue.config.js中加

chainWebpack: config => {
    config.externals({ './cptable': 'var cptable' })
},

2.导出Excel

方式一：

后端传文件流

  // 文件流导出
  static export({ data, title }) {
    if (!data) {
      Vue.$message({ type: 'error', message: '下载失败' })
      return
    }
    const element = document.createElement('a')
    const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
    element.setAttribute('href', URL.createObjectURL(blob))
    element.setAttribute('download', `${title}.xls`)
    element.click()
  }

注意：一定要在请求中加 responseType: 'arraybuffer'

方式二：

本地将数据转成数组

// 本地导出
  static exportXLSX({ data, title }) {
    const style = {
      header: {
        font: { name: '楷书', sz: 15, color: { rgb: '000' } },
        alignment: { vertical: 'center', horizontal: 'center', wrapText: true },
        fill: { bgColor: { rgb: '808080' }, fgColor: { rgb: '808080' } }
      },
      default: {
        font: { name: 'Arial', sz: 11 },
        alignment: { vertical: 'center', horizontal: 'center', wrapText: true }
      }
    }
    const wopts = {
      bookType: 'xlsx',
      bookSST: false,
      type: 'binary',
      cellStyles: true,
    }
    const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} }
    wb.Sheets.Sheet1 = XLSX.utils.json_to_sheet(data)
    const wpxVal = []
    const sheetsArr = Object.keys(wb.Sheets.Sheet1).map(key => ({
      key,
    }))
    sheetsArr.forEach(item => {
      if (item.key.length === 2 && item.key.substring(1, 2) === '1') {
        wpxVal.push({
          wpx: 150
        })
        wb.Sheets.Sheet1[item.key].s = style.header
      } else if (item.key.substring(1, 2) !== 'r') {
        wb.Sheets.Sheet1[item.key].s = style.default
      }
    })
    wb.Sheets.Sheet1['!cols'] = wpxVal
    const tmpDown = new Blob([this.s2ab(XLSXStyle.write(wb, wopts))], { type: 'application/octet-stream' })
    FileSaver.saveAs(tmpDown, `${title}.xls`)
  }

  // 字符串转字符流
  static s2ab(s) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    // eslint-disable-next-line no-bitwise
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
    return buf
  }

3.导入

1、新建文件excel.vue

<template>
  <span style="margin-right:10px">
    <input
      class="input-file"
      type="file"
      @change="exportData"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
    />
    <el-button type="primary" size="mini" icon="el-icon-upload" @click="btnClick">上传Excel表格数据</el-button>
  </span>
</template>
 
<script>
// 引入组件
import XLSX from "xlsx";
export default {
  data() {
    return {};
  },
  methods: {
    btnClick() {
      // 点击事件
      document.querySelector(".input-file").click();
    },
    exportData(event) {
      if (!event.currentTarget.files.length) {
        return;
      }
      const that = this;
      // 拿取文件对象
      var f = event.currentTarget.files[0];
      // 用FileReader来读取
      var reader = new FileReader();
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var wb; // 读取完成的数据
        var outdata; // 你需要的数据
        var reader = new FileReader();
        reader.onload = function() {
          // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          // 接下来就是xlsx了，具体可看api
          wb = XLSX.read(binary, {
            type: "binary"
          });
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // 自定义方法向父组件传递数据
          that.$emit("getResult", outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      reader.readAsBinaryString(f);
    }
  }
};
</script>
 
<style>
.input-file {
  display: none;
}
</style>

2、组件调用useExcel.vue

<template>
  <import-excel @getResult="getMyExcelData" />
</template>
<script>
import importExcel from "@/components/excel/importExcel";
export default {
  data() {
    return {};
  },
  components: {
    importExcel
  },
  methods: {
    getMyExcelData(data) {
      // data 为读取的excel数据，在这里进行处理该数据
      console.log(data);
    }
  }
};
</script>