vue,js直接导出excel，xlsx的方法，XLSX_STYLE 行高设置失效的问题解决

1、先安装依赖：xlsx、xlsx-style、file-saver三个包

npm install xlsx xlsx-style file-saver

2、引入：

<script>
import * as XLSX from 'xlsx/xlsx.mjs'
import XLSX_STYLE from 'xlsx-style';
import { saveAs } from 'file-saver';
export default {
  name: 'HelloWorld',
  data () {
    return {
      showData:[
        {type:1,createdTime:222,logistNo:"大课间分数段赛覅u覅欧派",note:"科技含量快递费科技大时代哈的你看老师的话副科老师"},
        {type:1,createdTime:222,logistNo:3,note:"asdfads"},
      ]
    }
  },

3、两个方法：

methods:{
    exportExcel() {
    console.log("start")
      const data = this.showData.map(item => {
        return {
          '类型': item.type,
          '订单日期': item.createdTime,
          '订单号': item.logistNo,
          '备注': item.note,
        }
      });
      // 定义表头样式
      const headerStyle = {
        fill: {
          fgColor: { rgb: '0070C0' },
        },
        font: {
          color: { rgb: 'ffffff' },
          name: '微软雅黑',
          sz: 11,
          bold:true
        },
        border: {
          top: { style: 'thin', color: { rgb: '000000' } },
          bottom: { style: 'thin', color: { rgb: '000000' } },
          left: { style: 'thin', color: { rgb: '000000' } },
          right: { style: 'thin', color: { rgb: '000000' } },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center',
          wrapText: true,
        },
      };
      const contentStyle = {
        font: {
          name: '宋体',
          sz: 10,
        },
        border: {
          top: { style: 'thin', color: { rgb: '000000' } },
          bottom: { style: 'thin', color: { rgb: '000000' } },
          left: { style: 'thin', color: { rgb: '000000' } },
          right: { style: 'thin', color: { rgb: '000000' } },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center',
          wrapText: false,//超长自动换行
        },
      };
      const worksheet = XLSX.utils.json_to_sheet(data);
      var wscols = [{ wch: 30 }, { wch: 30 }, { wch: 50 }]
      var wsrows = [{ hpx: 888 }, { hpx: 305 }]
      worksheet['!cols'] = wscols//设置列宽
      worksheet['!rows'] = wsrows//设置行高********************注意

      // 将表头样式应用到 worksheet 对象中的表头单元格
      const headerRange = XLSX.utils.decode_range(worksheet['!ref']);
      for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
        const headerCell = XLSX.utils.encode_cell({ r: headerRange.s.r, c: col });
        worksheet[headerCell].s = headerStyle;
      }

      // 将内容样式应用到 worksheet 对象中的所有单元格
      const contentRange = XLSX.utils.decode_range(worksheet['!ref']);
      for (let row = contentRange.s.r + 1; row <= contentRange.e.r; row++) {
        for (let col = contentRange.s.c; col <= contentRange.e.c; col++) {
          const contentCell = XLSX.utils.encode_cell({ r: row, c: col });
          worksheet[contentCell].s = contentStyle;
        }
      }
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      // 将 workbook 对象转换为二进制数据流并下载
      const wbout = XLSX_STYLE.write(workbook, { bookType:'xlsx',type:'binary' });
      const blob = new Blob([this.s2ab(wbout)],{type:'application/octet-stream'});
      saveAs(blob, 'table.xlsx');
    },
    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;
    },
  },

 问题解决：

行高的设置不起作用，是因为XLSX_STYLE包里面没有这个方法，但是xlsx里面有：

\node_modules\xlsx-style\xlsx.js

里面找到：write_ws_xml_data 函数注释掉

用这个里面的函数替换：

\node_modules\xlsx\xlsx.js

function write_ws_xml_data(ws, opts, idx, wb) {......}

同时根据报错，一起加入：

var DEF_PPI = 96, PPI = DEF_PPI;
  function px2pt(px) { return px * 96 / PPI; }
  function pt2px(pt) { return pt * PPI / 96; }
  function write_ws_xml_data(ws, opts, idx, wb) {}

这样就完美了。