vue中使用xlsx导出表格

1、安装xlsx

npm install xlsx --save

2、引用插件

import XLSX from 'xlsx'

3、下载逻辑

a、定义sheet2blob方法，将sheet转成Excel文件的blob对象

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

b、定义downloadUrl方法，生成下载url并创建一个a标签，自动点击下载文件

function downloadUrl(url, saveName, params) {
  if (params) {
    axios.post(url, params, { responseType: "blob" }).then(res => {
      let reader = new FileReader();
      reader.readAsDataURL(res);
      reader.onload = e => {
        downloadUrl(e.target.result, saveName);
      };
    });//需要请求数据的情况，使用axios请求数据
  } else {
    let aLink = document.createElement("a");
    aLink.href = url;
    aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    let 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);
  }
}

 

c、调用

import { write,utils } from "xlsx";

let saveName='dayTable.xlsx'
let aoa=[
    ['日报统计',null,null,null,null,null,null,null,null,null,null,null],
    ['统计时间：  制表时间：  ',null,null,null,null,null,null,null,null,null,null,null],
    ['时间','姓名','员工编号','部门','列5','列6','列7','列8','列9','列10','列11','列12','列13'],
    ['2019/08/30','张三','ls','行政','--','--','--','--','--','--','--','--','--'],
    ['2019/08/30','李四','ls','人事','--','--','--','--','--','--','--','--','--']
  ] 
let sheet = utils.aoa_to_sheet(aoa);

//此处可以使用xlsx-style插件设置简单的表格样式

let url = sheet2blob(sheet);

 if (typeof url == "object" && url instanceof Blob) {

    url = URL.createObjectURL(url); // 创建blob地址

 }

downloadUrl(url, saveName);

比较完整的代码如下：

import { write, utils } from "xlsx";
import axios from "../axios";
//下载方法
export default function openDownloadDialog(aoa, saveName,setStyleFn) {
  //模拟数据---------------------
let saveName='dayTable.xlsx'
let aoa=[
    ['日报统计',null,null,null,null,null,null,null,null,null,null,null],
    ['统计时间：  制表时间：  ',null,null,null,null,null,null,null,null,null,null,null],
    ['时间','姓名','员工编号','部门','列5','列6','列7','列8','列9','列10','列11','列12','列13'],
    ['2019/08/30','张三','ls','行政','--','--','--','--','--','--','--','--','--'],
    ['2019/08/30','李四','ls','人事','--','--','--','--','--','--','--','--','--']
  ] 
  //模拟数据-end-----------------    
  try {
    let sheet = utils.aoa_to_sheet(aoa);
    //可传入一个设置样式的回调方法
    setStyleFn&&setStyleFn(sheet)
    let url = sheet2blob(sheet);
    if (typeof url == "object" && url instanceof Blob) {
      url = URL.createObjectURL(url); // 创建blob地址
    }
    downloadUrl(url, saveName);
    Notification.success(i18n.t('commonText.ExportSPWFD'));
  } catch (error) {
    Notification.error(i18n.t('commonText.ExportF'));
  }
}

export function downloadUrl(url, saveName, params) {
  if (params) {
    axios.post(url, params, { responseType: "blob" }).then(res => {
      let reader = new FileReader();
      reader.readAsDataURL(res);
      reader.onload = e => {
        downloadUrl(e.target.result, saveName);
      };
    });
  } else {
    let aLink = document.createElement("a");
    aLink.href = url;
    aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    let 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 sheet2blob(sheet, sheetName = "sheet1") {
  let workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  };
  workbook.Sheets[sheetName] = sheet;
  // 生成excel的配置项
  let wopts = {
    bookType: "xlsx", // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: "binary"
  };
  let wbout = write(workbook, wopts);
  let blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
  // 字符串转ArrayBuffer
  function s2ab(s) {
    let buf = new ArrayBuffer(s.length);
    let view = new Uint8Array(buf);
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
  return blob;
}

使用是，引入改文件，并调用openDownloadDialog方法。

3、设置表格样式

安装插件 npm install xlsx-style --save

import { write } from "xlsx-style";

• 合并单元格

sheet['!merges'] = [
    {s:{c:0,r:0},e:{c:12,r:0}},//合并第一行第1列到第13列的单元格
];

• 设置列宽

sheet['!cols'] =[
    {wpx:100}//设置第一列的宽度为100
]

• 设置单元格其他样式

  for(let att in sheet){
    if(att!='!ref'&&att!='!merges'){
      sheet[att].s={}
      sheet[att].s.border={//设置边框
        top:{style:'thin',color:'000'},
        bottom:{style:'thin',color:'000'},
        left:{style:'thin',color:'000'},
        right:{style:'thin',color:'000'},
      }
      sheet[att].s.font={//设置字体
        name:'宋体',
        sz:11,
        bold:false
      }
    }
}

4、xlsx-style插件bug修改

import XLSX from “xlsx-style”
报错：This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js
需要修改源码：
在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;