zoukankan      html  css  js  c++  java
  • vue---将json导出Excel的方法

    在做数据表格渲染的时候,经常遇到的需求的就是将导出excel,下面是使用vue进行项目数据进行导出的方法。

    一、安装依赖

    npm i -S file-saver
    npm i -S xlsx

    二、在src目录下新建utilsl文件夹,新建json2excel.js,并引入依赖

    import { saveAs } from 'file-saver'
    import XLSX from 'xlsx/dist/xlsx.full.min'
    
    // 将json数据处理为xlsx需要的格式
    function datenum(v, date1904) {
        if (date1904) v += 1462
        let epoch = Date.parse(v)
        return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
    }
     
    function data2ws(data) {
        const ws = {}
        const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
        for (let R = 0; R != data.length; ++R) {
            for (let C = 0; C != data[R].length; ++C) {
                if (range.s.r > R) range.s.r = R
                if (range.s.c > C) range.s.c = C
                if (range.e.r < R) range.e.r = R
                if (range.e.c < C) range.e.c = C
                const cell = { v: data[R][C] }
                if (cell.v == null) continue
                const cell_ref = XLSX.utils.encode_cell({c: C, r: R})
     
                if (typeof cell.v === 'number') cell.t = 'n'
                else if (typeof cell.v === 'boolean') cell.t = 'b'
                else if (cell.v instanceof Date) {
                    cell.t = 'n'
                    cell.z = XLSX.SSF._table[14]
                    cell.v = datenum(cell.v)
                }
                else cell.t = 's'
     
                ws[cell_ref] = cell
            }
        }
        if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
        return ws
    }
    // 导出Excel
    function Workbook() {
        if (!(this instanceof Workbook)) return new Workbook()
        this.SheetNames = []
        this.Sheets = {}
    }
     
    function s2ab(s) {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf)
        for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
        return buf
    }
     
    /*
    * th => 表头
    * data => 数据
    * fileName => 文件名
    * fileType => 文件类型
    * sheetName => sheet页名
    */
    export default function toExcel ({th, data, fileName, fileType, sheetName}) {
        data.unshift(th)
        const wb = new Workbook(), ws = data2ws(data)
        sheetName = sheetName || 'sheet1'
        wb.SheetNames.push(sheetName)
        wb.Sheets[sheetName] = ws
        fileType = fileType || 'xlsx'
        var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
        fileName = fileName || '列表'
        saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${fileName}.${fileType}`)
    }

    具体使用:

    第一种方式:组件引入

    <template>
      <div style="padding:40px;">
        <el-button type="primary" size="small" @click="downExcel">导出EXCEL</el-button>
      </div>
    </template>
    
    <script>
    import toExcel from '@/utils/json2excel'
    export default {
      name: "landing-page",
      data() {
        return {
          excelData: [
            {name: '张三',birthday: new Date('1990-01-01'),sex: '男',age: 28},
            {name: '李四',birthday: new Date('1991-01-01'),sex: '女',age: 27}
          ]
        };
      },
      mounted() {},
      methods: {
         downExcel() {
          const th = ['姓名', '生日', '性别', '年龄']
          const filterVal = ['name', 'birthday', 'sex', 'age']
          const data = this.excelData.map(v => filterVal.map(k => v[k]))
          const [fileName, fileType, sheetName] = ['测试下载', 'xlsx', '测试页']
          toExcel({th, data, fileName, fileType, sheetName})
        }
      }
    };
    </script>

    第二种:全局挂载使用

    1、在main.js中全局挂载toExcel方法

    import toExcel from '@/excel/json2excel'
    Vue.prototype.$toExcel = toExcel

    2、在组件中调用toExcel方法导出excel

    <template>
      <div style="padding:40px;">
        <el-button type="primary" size="small" @click="downExcel">导出EXCEL</el-button>
      </div>
    </template>
    
    <script>
    import toExcel from '@/utils/json2excel'
    export default {
      name: "landing-page",
      data() {
        return {
          excelData: [
            {name: '张三',birthday: new Date('1990-01-01'),sex: '男',age: 28},
            {name: '李四',birthday: new Date('1991-01-01'),sex: '女',age: 27}
          ]
        };
      },
      mounted() {},
      methods: {
         downExcel() {
          const th = ['姓名', '生日', '性别', '年龄']
          const filterVal = ['name', 'birthday', 'sex', 'age']
          const data = this.excelData.map(v => filterVal.map(k => v[k]))
          const [fileName, fileType, sheetName] = ['测试下载', 'xlsx', '测试页']
          this.$toExcel({th, data, fileName, fileType, sheetName})
        }
      }
    };
    </script>

     技术支持:昆明猫咪科技

  • 相关阅读:
    HBase 高性能加入数据
    Please do not register multiple Pages in undefined.js 小程序报错的几种解决方案
    小程序跳转时传多个参数及获取
    vue项目 调用百度地图 BMap is not defined
    vue生命周期小笔记
    解决小程序背景图片在真机上不能查看的问题
    vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
    vue项目 一行js代码搞定点击图片放大缩小
    微信小程序进行地图导航使用地图功能
    小程序报错Do not have xx handler in current page的解决方法
  • 原文地址:https://www.cnblogs.com/e0yu/p/11230684.html
Copyright © 2011-2022 走看看