vue3使用前端插件xlsx

vue使用前端插件

vue使用前端插件xlsx导出表格安装后报错
解决：使用cnpm下载

cnpm install xlsx-style --save
cnpm install xlsx --save

1.若项目是由Vue2 + Webpack构建的，那所需依赖包，如下所示

npm i xlsx
npm i xlsx-style
可能还要解决 Can't resolve './cptable' in '...' 的问题，在 vue.config.js 文件中加入该配置

module.exports = {
    externals: {
        './cptable': 'var cptable'
     }
}

2.若项目是由Vue3 + Vite构建的，那所需依赖包，如下所示

npm i xlsx
npm i xlsx-style-vite

二、引用依赖

import * as XLSX from 'xlsx'
import * as XLSX_STYLE from 'xlsx-style' // Vue2 + Webpack
import * as XLSX_STYLE from 'xlsx-style-vite' // Vue3 + Vit

原文链接：https://blog.csdn.net/Cai181191/article/details/131130926

代码（集篇章于一段代码）

function exportToExcel() {
  // 创建单元格样式对象
  const cellStyle = {
    alignment: {
      horizontal: 'center', // 水平居中
      vertical: 'center' // 垂直居中
    }
  };

  // 工作簿
  const wb = XLSX.utils.book_new();
  // 工作表
  let ws = XLSX.utils.aoa_to_sheet([
    ['产品名称', '灭菌日期', '客户名称','加工单位','上箱模式','运行参数','','','灭菌批号','辐照订单编号','产品批号','加工数量','辐照起始','加工时间','产能','','','备注'], // 多级表头或合并单元格
    ['','','','','','输出电流','束下速度','生产道数','','','','','开始时间','结束时间','成本时间','产能','产能单价',''],

    ...tableData.value.map(row => {
      console.log('row',row)
      for ( let key in row) {
        if(row[key]==undefined) {
          row[key]=''
        }
      }
      return [row.materialName, row.createTime, row.clientName, row.unitName, row.workMode, row.current, row.speed, row.circle, row.serialNumber, row.orderCode, row.batchNo, row.quantity, row.startTime, row.endTime, row.dose]
    })

  // 单元格合并示例
  const cell = [
    // 列合并（r 表示行索引，c 表示列索引）
    {s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
    {s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
    {s: { r: 0, c: 2 }, e: { r: 1, c: 2 } },
    {s: { r: 0, c: 3 }, e: { r: 1, c: 3 } },
    {s: { r: 0, c: 4 }, e: { r: 1, c: 4 } },
    {s: { r: 0, c: 5 }, e: { r: 0, c: 7 } },
    {s: { r: 0, c: 8 }, e: { r: 1, c: 8 } },
    {s: { r: 0, c: 9 }, e: { r: 1, c: 9 } },
    {s: { r: 0, c: 10 }, e: { r: 1, c: 10 } },
    {s: { r: 0, c: 11 }, e: { r: 1, c: 11 } },
    {s: { r: 0, c: 14 }, e: { r: 0, c: 16 } },
    {s: { r: 0, c: 17 }, e: { r: 1, c: 17 } },

  ];
  ws["!merges"] = cell;
  const wsCols = [
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },
    { wch: 13 },

  ]
  ws['!cols'] = wsCols
  // ws["F1"].s = {font:{ bold: true },alignment:{ horizontal:"center",vertical:'center'},fill:{ fgcolor:{ rgb:"FFFF000" } }}

  for (let key in ws) {
    if (key == '!ref' || key == '!merges' || key == '!cols' || key == '!rows'){
      continue
    }if(key=='S2'){
      ws[key].s = {
        border: {
          top: {
            style: 'thin',
          },
          bottom: {
            style: 'thin',
          },
          left: {
            style: 'thin',
          },
          right: {
            style: 'thin',
          },
        },
      }
    } else {
      ws[key].s = {
        border: {
          top: {
            style: 'thin',
          },
          bottom: {
            style: 'thin',
          },
          left: {
            style: 'thin',
          },
          right: {
            style: 'thin',
          },
        },
        fill: { // 设置背景色
          fgColor: { rgb: 'ffffff' },
        },
        font: { // 设置字体
          name: '微软雅黑', // 字体名称
          sz: 10, // 字体大小
        },
        alignment: {
          horizontal: 'center', // 水平（向左、向右、居中）
          vertical: 'center', // 上下（向上、向下、居中）
          wrapText: true, // 设置单元格自动换行，目前仅对非合并单元格生效
          indent: 1 // 设置单元格缩进
        }
      }
    }
  }
  // console.log(111,ws);
      // 添加工作表
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  const tmpDown = new Blob([
    s2ab(
        XLSX_STYLE.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'binary',
          cellStyles: true,
        })
    ),
  ])

  // 生成Excel文件
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
  // 字符串转ArrayBuffer
  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;
  }

  downloadExcelFile(tmpDown,'export.xlsx')
  // 保存文件
  // saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),'export.xlsx');
}