ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

2021-04-06

2021-04-06 19:30:07  阅读：103  来源： 互联网

标签：06 04 range cell length ws 2021 var data


提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、vue-downDialog后台管理系统中的下载功能的封装以及使用

1.组件封装和方法封装

<template>
  <el-dialog
    :visible.sync="downDialog"
    width="450px"
    custom-class="downDialog"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div v-if="complete" class="animate-container">
      <span class="sa-line sa-tip animateSuccessTip" />
      <span class="sa-line sa-long animateSuccessLong" />
      <div class="animate-before">
        <div class="circle" />
      </div>
    </div>
    <div v-else class="loader">加载中...</div>
    <div class="down-loading-text">{{ complete?'下载已完成，请选择保存位置':'数据下载中，请稍后……' }}</div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      downDialog: false,
      complete: false
    }
  },
  mounted() {

  },
  methods: {
    close() {
      const vm = this
      vm.complete = true
      setTimeout(() => {
        vm.downDialog = false
      }, 1000)
    },
    show() {
      this.downDialog = true
    }
  }
}
</script>

2此方法封装为公共方法,导入导出路径自己根据项目配置放置

export function exportToExcel(excelHeard, excelHeardFilter, excelData, excelName) {
  return new Promise((resolve, reject) => {
    require.ensure([], () => {
      const {
        export_json_to_excel
      } = require('./Export2Excel')
      const tHeader = excelHeard
      const filterVal = excelHeardFilter
      const data = excelData.map(v => filterVal.map(j => v[j]))
      let excelTitle = new Date().getTime()
      if (excelName) {
        excelTitle = excelName
      }
      export_json_to_excel(tHeader, data, excelTitle)
      resolve()
    })
  })
}


/* eslint-disable */
require('script-loader!file-saver');
require('./Blob' );
require('script-loader!xlsx/dist/xlsx.core.min');
import XLSX from 'yxg-xlsx-style'

function generateArray(table) {
  var out = [];
  var rows = table.querySelectorAll('tr');
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) {
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll('td');
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var cellValue = cell.innerText;
      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges
      ranges.forEach(function (range) {
        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        }
      });

      //Handle Row Span
      if (rowspan || colspan) {
        rowspan = rowspan || 1;
        colspan = colspan || 1;
        ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
      }
      ;

      //Handle Value
      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan
      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    }
    out.push(outRow);
  }
  return [out, ranges];
};

function datenum(v, date1904) {
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {};
  var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
  for (var R = 0; R != data.length; ++R) {
    for (var 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;
      var cell = {v: data[R][C]};
      if (cell.v == null) continue;
      var 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;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

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;
}

export function export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  var oo = generateArray(theTable);
  var ranges = oo[1];

  /* original data */
  var data = oo[0];
  var ws_name = "SheetJS";

  var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */
  // ws['!cols'] = ['apple', 'banan'];
  ws['!merges'] = ranges;

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});

  saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
}

function formatJson(jsonData) {

}

export function export_json_to_excel(th, jsonData, defaultTitle) {

  /* original data */

  var data = jsonData;
  data.unshift(th);
  var ws_name = "SheetJS";

  var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

  /*设置worksheet每列的最大宽度*/
  const colWidth = data.map(row => row.map(val => {
    /*先判断是否为null/undefined*/
    if (val == null) {
      return { 'wch': 12 };
    }
    /*再判断是否为中文*/
    //混合型字符判断有误 舍弃
    // else if (val.toString().charCodeAt(0) > 255) {
    //   return { 'wch': val.toString().length * 2 + 5 };
    // } else {
    //   return { 'wch': val.toString().length + 5 };
    // }
    else if (escape(val).indexOf( "%u" )<0) {
      return { 'wch': val.toString().length + 3 };
    } else {
      return { 'wch': val.toString().length * 2 + 3 };
    }
  }))

  /*以第一行为初始值*/
  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;

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
  var dataInfo = wb.Sheets[wb.SheetNames[0]];
  const borderAll = {  //单元格外侧框线
    top: {
      style: 'thin'
    },
    bottom: {
      style: 'thin'
    },
    left: {
      style: 'thin'
    },
    right: {
      style: 'thin'
    }
  };
  //给所有单元格加上样式
  for (var i in dataInfo) {
    if (i == '!ref' || i == '!merges' || i == '!cols' || i == 'A1') {
    } else {
      dataInfo[i + ''].s = {
        // border: borderAll,
        font: {
          name: '微软雅黑',
          sz: 10,
          bold: false,
          italic: false,
          underline: false
        },
      }
    }
  }

 //设置主标题样式
  let style = {
    fill: {
      fgColor: { rgb: "217346" }
    },
    font: {
      name: '微软雅黑',
      sz: 10,
      color: {rgb: "fafafa"},
      bold: true,
      italic: false,
      underline: false
    },
    alignment: {
      // horizontal: "center" ,
      vertical: "center"
    },
    // border: borderAll
  };
  var headerColMap = new Map(
    [
      [0, "A1"],[1, "B1"],[2, "C1"],[3, "D1"],[4, "E1"],[5, "F1"],[6, "G1"],[7, "H1"]
      ,[8, "I1"],[9, "J1"],[10, "K1"],[11, "L1"],[12, "M1"],[13, "N1"],[14, "O1"],[15, "P1"]
      ,[16, "Q1"],[17, "R1"],[18, "S1"],[19, "T1"],[20, "U1"],[21, "V1"],[22, "W1"]
      ,[23, "X1"],[24, "Y1"],[25, "Z1"]
    ]
  );
  th.forEach((item,index)=>{
    dataInfo[headerColMap.get(index)].s = style
  })

  var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  var title = defaultTitle || '列表'
  saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

3.项目导入注册以及页面使用

import DownDialog from '@/components/DownLoading/index.vue'
import { exportToExcel } from '@/utils'
components: { DownDialog },

<down-dialog ref="downDialog" />

//这里是绑定的按钮触发下载事件
<el-button
 :disabled="tableDataLoading"
 size="small"
 class="g-search-download"
 icon="el-icon-download"
 @click="exportExcel"
 />

4 执行方法如下,思路就是:发送请求获取不分页的所有数据,然后填写表格 的内容数据下载就可以了

exportExcel() {
      const vm = this
      this.$refs.downDialog.show()
      this.$http
        .request_get( this.$api.basic.orgnization.page, {
          isUsed: false,
          page: 1,
          limit: 9999
        })
        .then((response) => {
          if (response.data.success) {
            const _excel = {
              excelHeard: ['学校名称', '上级机构', '教学副校长',  '联系方式','教务主任','联系方式'],
              excelHeardFilter: [
                'name',
                'parentOrgName',
                'prinName',
                'prinPhone',
                'deanName',
                'deanPhone'
              ],
              excelData: response.data.data.rows
            }
            exportToExcel(
              _excel.excelHeard,
              _excel.excelHeardFilter,
              _excel.excelData
            ).then(() => {
              setTimeout(() => {
                vm.$refs.downDialog.close()
              }, 2000)
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.message
            })
            return
          }
        })
    },

5 下载效果图

在这里插入图片描述

总结

以上就是在项目中经常会使用到的下载导出表格功能,封装之后在项目中很好用。

标签：06,04,range,cell,length,ws,2021,var,data
来源： https://blog.csdn.net/v_shenghuojia/article/details/115467856

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有