vue使用xlsx和xlsx-style导出excel表格

目录

使用版本

过程中报错

用到的方法

修改源代码

完整demo演示代码

---

使用版本

xlsx: 0.16.2

xlsx-style: 0.8.13

过程中报错

报错借鉴了下面链接，写的挺好的！

vue使用xlsx、xlsx-style和fileSaver导出excel表格_牛仔很会忙的博客-CSDN博客_vue使用xlsx

1.utils of undefined

需要切换一下xlsx版本 npm install --save xlsx@0.17.0

2.Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

在vue.config.js中添加这样一串代码:

configureWebpack: {
    externals: {
      './cptable': 'var cptable'
    },
  },

3.Can’t resolve ‘fs’

在vue.config.js中继续添加：

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {

    externals: {
      './cptable': 'var cptable'
    },
    resolve: {
      fallback: {
        fs: false
      }
    },
  }
})

4. jszip not a constructor：

需要在node_modules中找到相应的文件进行修改：

node_modules\xlsx-style\xlsx.js (1339行左右)
将
if(typeof jszip === 'undefined') jszip = require('./js'+'zip').JSZip;
替换成
if(typeof jszip === 'undefined') jszip = require('./jszip.js');

用到的方法

这里用到了一个openDownloadDialog方法，我是直接挂载到vue身上了，这样不用在每个页面引入；

1.在src目录下创建一个downLoad.js文件

文件内容就是openDownloadDialog方法：

export function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var 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);
}

在main.js中引入并挂载：

import { openDownloadDialog } from '@/export/download.js'
Vue.prototype.openDownloadDialog = function (val1, val2) {
  openDownloadDialog(val1, val2);
}

修改源代码

1. xlsx这个包里，更改xlsx/dist/xlsx.extendscript.js这个文件：

var XLSX = {};
function make_xlsx_lib(XLSX){
XLSX.version = '0.16.2';
// 将上面的改为下面的即可
var XLSX2 = {};
function make_xlsx_lib(XLSX2){
XLSX2.version = '0.16.2';

完整demo演示代码

可以直接复制到自己项目中试一下，然后根据自己需要进行更改就行了

<template>
  <div id="app">
    <el-button type="primary" size="small" @click="downLoad"
      >下载excel</el-button
    >
    <el-table :data="tableData" style="width: 100%" border ref="table">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import XLSX2 from 'xlsx'
import XLSX from 'xlsx-style'
export default {
  name: 'App',
  components: {},
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1520 弄',
        },
      ],
    }
  },
  methods: {
      // downLoad里面的代码是主要的
    downLoad() {
      // var fix = document.querySelector('.ant-table-thead')
      var table_dom = this.$refs['table'].$el
      //创建工作表
      const new_book = XLSX2.utils.book_new()
      //创建工作簿
      const new_sheet = XLSX2.utils.table_to_sheet(table_dom)
      // new_sheet['!cols'] = [{wch: 10}]
      // new_sheet['!rows'] = [{hpx: 25}]
      //自定义样式：第一列列宽
      var wscols = [{ wch: 30 }, { wch: 30 }, { wch: 50 }]
      var wsrows = [{ hpt: 35 }, { hpt: 35 }]
      new_sheet['!cols'] = wscols
      new_sheet['!rows'] = wsrows
      let numIndex = 0
      for (let key in new_sheet) {
        if (key.indexOf('!') !== 0) {
          if (numIndex < 4) {
            console.log(key, numIndex, 'numindex')
            new_sheet[key]['s'] = {
              font: {
                sz: 12, //设置标题的字号
                bold: true, //设置标题是否加粗
                name: '宋体',
              },
              //设置标题水平竖直方向居中，并自动换行展示
              alignment: {
                horizontal: 'center',
                vertical: 'center',
                wrapText: true,
              },
              // fill: {
              //   fgColor: {
              //     rgb: 'ebebeb',
              //   },
              // },
            }
            new_sheet['B2']['s'] = {
              font: {
                sz: 12, //设置标题的字号
                bold: true, //设置标题是否加粗
                name: '宋体',
              },
              //设置标题水平竖直方向居中，并自动换行展示
              alignment: {
                horizontal: 'center',
                vertical: 'center',
                wrapText: true,
              },
              // fill: {
              //   fgColor: {
              //     rgb: 'ebebeb',
              //   },
              // },
            }
          } else {
            new_sheet[key]['s'] = {
              font: {
                sz: 10,
                name: '宋体',
              },
              alignment: {
                horizontal: 'center',
                vertical: 'center',
                wrapText: true,
              },
            }
          }
          numIndex++
        }
      }
      XLSX2.utils.book_append_sheet(new_book, new_sheet, '健康码情况（各高校）')
      var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary',
      }
      console.log('123')
      var wbout = XLSX.write(new_book, wopts)

      var buf = new ArrayBuffer(wbout.length)
      var view = new Uint8Array(buf)

      for (var i = 0; i != wbout.length; ++i)
        view[i] = wbout.charCodeAt(i) & 0xff
      var blob = new Blob([buf], {
        type: 'application/octet-stream',
      }) // 字符串转ArrayBuffer
      // 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls

      this.openDownloadDialog(blob, `测试.xlsx`)
      // 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
    },
  },
}
</script>

<style>
</style>