vite + vue3 + js + xlsx 导出excel

安装依赖

 npm install xlsx --save 

使用版本

 

 封装js

/* 导出excel文件 */
 
/**
 * 导出excel文件实现思路分析
 *
 * 1.通过XLSX插件的 XLSX.utils.book_new()方法，创建excel工作蒲对象wb。
 * 2.按需插入第一行数据，通过数组的unshift()方法。
 * 3.通过XLSX.utils.json_to_sheet(),创建excel表格对象ws。
 * 4.通过json_to_array(key，data),结合自定义的字段名key，和数据记录data，生成新数组。
 * 5.通过auto_width(),对ws和新生成的数组，自动计算各列col宽。
 * 6.通过XLSX.utils.book_append_sheet(),生成实际excel工作蒲，并使用XLSX.writeFile()生成excel文件。
 */

// 不能用！！！！！！真的坑，我是服了
//  import XLSX from 'xlsx'
 
 import * as XLSX from 'xlsx'

 
 // 自动计算col列宽
 function auto_width (ws, data) {
   /*set worksheet max width per col*/
   const colWidth = data.map(row => row.map(val => {
     /*if null/undefined*/
     if (val == null) {
       return { 'wch': 10 }
     }
     /*if chinese*/
     else if (val.toString().charCodeAt(0) > 255) {
       return { 'wch': val.toString().length * 2 }
     } else {
       return { 'wch': val.toString().length }
     }
   }))
   /*start in the first row*/
   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
 }
  
 // 将json数据转换成数组
 function json_to_array (key, jsonData) {
   return jsonData.map(v => key.map(j => {
     return v[j]
   }))
 }
  
 /**
  * @param header Object，表头
  * @param data Array，表体数据
  * @param key Array，字段名
  * @param title String，标题（会居中显示），即excel表格第一行
  * @param filename String，文件名
  * @param autoWidth Boolean，是否自动根据key自定义列宽度
  */
 export const exportJsonToExcel = ({
   header,
   data,
   key,
   title,
   filename,
   autoWidth
 }) => {
   const wb = XLSX.utils.book_new()
   if (header) {
     data.unshift(header)
   }
   if (title) {
     data.unshift(title)
   }
   const ws = XLSX.utils.json_to_sheet(data, {
     header: key,
     skipHeader: true
   })
   if (autoWidth) {
     const arr = json_to_array(key, data)
     auto_width(ws, arr)
   }
   XLSX.utils.book_append_sheet(wb, ws, filename)
   XLSX.writeFile(wb, filename + '.xlsx')
 }
 export default {
   exportJsonToExcel
 }

　　template使用

import { exportJsonToExcel } from "@/util/exportExcel.js";

const exExcel = () => {
      const tableField = [
          "userCode",
          "userName",
          "department",
          "major",
          "position",
        ],
        tableHeader = {
          userCode: "工号",
          userName: "姓名",
          department: "部门",
          major: "专业",
          position: "职位/职称",
        },
        tableTitle = "导出表格",
        templateData = [
          {
            userCode: "N1001",
            userName: "张三",
            department: "综合管理部",
            major: "计算机科学与技术",
            position: "项目经理",
          },
        ],
        obj = {
          header: tableHeader,
          data: templateData,
          key: tableField,
          title: "",
          filename: "团队成员导入模板",
          autoWidth: true,
        };
      exportJsonToExcel(obj);
    };