当前位置: 首页 > article >正文

vue使用Export2Excel导出表格

安装插件

npm install xlsx xlsx-style file-saver
npm install node-polyfill-webpack-plugin (如果不安装的话后面使用会报错)

添加相关配置

在vue.config.js文件

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
	configureWebpack: {
	    resolve: {
	      fallback: { 
	        fs: false
	      },
	    },
	    externals: {
	      './cptable': 'var cptable'
	    },
	    plugins: [
	      new NodePolyfillPlugin()
	    ]
	},
})

封装公共方法

Export2Excel.js

import * as XLSX from 'xlsx'
import * as XLSXStyle from 'xlsx-style'
import { saveAs } from 'file-saver'
// 根据dom导出表格
export function exportToExcel(idSelector, fileName, titleNum = 1) {
  // 设置导出的内容是否只做解析,不进行格式转换     false:要解析, true:不解析
  const xlsxParam = { raw: true }
  let table = document.querySelector(idSelector).cloneNode(true);

  // 因为element-ui的表格的fixed属性导致多出一个table,会下载重复内容,这里删除掉
  if (table.querySelector('.el-table__fixed-right'))
      table.removeChild(table.querySelector('.el-table__fixed-right'));
  if (table.querySelector('.el-table__fixed'))
      table.removeChild(table.querySelector('.el-table__fixed'));

  const wb = XLSX.utils.table_to_book(table, xlsxParam)
  let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref']);
  let cWidth = [];
  for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列
      let len = 100; //默认列宽
      let len_max = 400; //最大列宽
      for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
          let cell = { c: C, r: R };                    //二维 列行确定一个单元格
          let cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2
          if (wb.Sheets['Sheet1'][cell_ref]) {
              // if (R == 0){
              if (R < titleNum) {
                  wb.Sheets['Sheet1'][cell_ref].s = {  //设置第一行单元格的样式 style
                      alignment: {
                          horizontal: 'center',
                          vertical: 'center',
                      },
                  };
              } else {
                  wb.Sheets['Sheet1'][cell_ref].s = {
                      alignment: {
                          horizontal: 'center',
                          vertical: 'center',
                      },
                  };
              }
              //动态自适应:计算列宽
              let va = JSON.parse(JSON.stringify(wb.Sheets['Sheet1'][cell_ref].v));
              var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g); //匹配中文
              var card11 = "";
              if (card1) {
                  card11 = card1.join("")
              }
              var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, "");  //剔除中文
              let st = 0;
              if (card11) {
                  // st += card11.length * 16  //中文字节码长度
                  st += card11.length * 20  //中文字节码长度
              }
              if (card2) {
                  // st += card2.length * 8  //非中文字节码长度
                  st += card2.length * 10  //非中文字节码长度
              }
              if (st > len) {
                  len = st;
              }
          }
      }
      if (len > len_max) {//最大宽度
          len = len_max;
      }

      cWidth.push({ 'wpx': len });     //列宽
  }
  wb.Sheets['Sheet1']['!cols'] = cWidth
  const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
  try {
    saveAs(new Blob([s2ab(wbout)], { type: 'text/plain;charset=utf-8' }), `${fileName}.xlsx`)
  } catch (e) {
    if (typeof console !== 'undefined') {
      console.log(e, wbout)
    }
  }
  return wbout
}
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;
}  

使用

import { exportToExcel } from '@/utils/Export2Excel'
handelExport() {
	// 给el-table组件添加id="table"
   exportToExcel('#table', '应用日志')
},

http://www.kler.cn/a/297044.html

相关文章:

  • 倒推因子分解法——C语言实现
  • 象过河在线进销存软件——简单、高效、智能,让生意更简单!
  • Qt-高DPI显示器
  • 大数据-119 - Flink Window总览 窗口机制-滚动时间窗口-基于时间驱动基于事件驱动
  • “声”临其境:iKF Ultra 降噪耳机,音乐与静谧的完美融合
  • 基于百度AIStudio飞桨paddleRS-develop版道路模型开发训练
  • 鸿蒙轻内核A核源码分析系列四(3) 虚拟内存
  • 视频监控管理平台LntonAIServer视频智能分析噪声检测应用场景
  • 【JUC】13-原子类
  • 如何在算家云搭建MindSearch(智能搜索)
  • [N1CTF 2018]eating_cms1
  • 【Redis】redis5种数据类型(string)
  • blender云渲染来了,blender云渲染教程!
  • CTFHub技能树-Git泄漏-Log
  • 5.测试用例设计方法
  • 移动端测试
  • 转义字符笔记
  • 代理模式详解
  • Treeview创始人谈空间计算/XR在培训和教育的应用场景
  • 13、Flink SQL 的 时间属性 介绍