JavaScript：利用a标签生成excel文件

<template>
  <a-button type="primary" @click="tableToExcel">导出excel</a-button>
</template>
<script>
  export default {
    data() {
      return {
        spcDatas:[
			['上公差：13.7','下公差：13.1','标准值：13.4'],
			['sigma:0.11','Cp:0.89','Cpu:1.49','Cpl:0.29','Cpk:0.29','CR:1.13','Cpm:0.01','Pp:1.24','Ppk:0.4','PR:0.81'],
			['日期时间','2022/04/10 09:01:01','2022/04/11 09:01:01','2022/04/12 09:01:01','2022/04/13 09:01:01','2022/04/14 09:01:01','2022/04/15 09:01:01','2022/04/16 09:01:01','2022/04/17 09:01:01','2022/04/18 09:01:01','2022/04/19 09:01:01','2022/04/20 09:01:01','2022/04/21 09:01:01','2022/04/22 09:01:01','2022/04/23 09:01:01','2022/04/24 09:01:01','2022/04/25 09:01:01','2022/04/26 09:01:01','2022/04/27 09:01:01','2022/04/28 09:01:01','2022/04/29 09:01:01','2022/04/30 09:01:01','2022/05/01 09:01:01','2022/05/02 09:01:01','2022/05/03 09:01:01','2022/05/04 09:01:01'],
			['1','13.49','13.7','13.52','13.61','13.67','13.44','13.45','13.36','13.7','13.54','13.64','13.6','13.44','13.55','13.7','13.5','13.64','13.32','13.67','13.56','13.64','13.58','13.46','13.32','13.4'],
			['2','13.63','13.48','13.42','13.35','13.51','13.46','13.42','13.44','13.61','13.6','13.38','13.53','13.64','13.3','13.68','13.51','13.42','13.52','13.37','13.55','13.63','13.61','13.52','13.5','13.55'],
			['3','13.39','13.69','13.38','13.68','13.54','13.35','13.51','13.65','13.6','13.4','13.59','13.7','13.41','13.51','13.62','13.68','13.57','13.5','13.36','13.48','13.62','13.6','13.3','13.61','13.67'],
			['平均值','13.50 ','13.62 ','13.44 ','13.55 ','13.57 ','13.42 ','13.46 ','13.48 ','13.64 ','13.51 ','13.54 ','13.61 ','13.50 ','13.45 ','13.67 ','13.56 ','13.54 ','13.45 ','13.47 ','13.53 ','13.63 ','13.60 ','13.43 ','13.48 ','13.54'],
			['极差','0.24','0.22','0.14','0.33','0.16','0.11','0.09','0.29','0.1','0.2','0.26','0.17','0.23','0.25','0.08','0.18','0.22','0.2','0.31','0.08','0.02','0.03','0.22','0.29','0.27']
		]
      }
    },
    methods: {
      async tableToExcel(){
        const jsonData = this.spcDatas//想要导出的数据，必须是数组
        // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `XR控制图\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            for(const key in jsonData[i]){
                str+=`${jsonData[i][key] + '\t'},`   
            }
            str+='\n';
        }
        // encodeURIComponent解决中文乱码
        const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
        // 通过创建a标签实现
        const link = document.createElement("a")
        link.href = uri;
        // 对下载的文件命名
        link.download =  "SPC报告查询结果.csv"
        link.click()
      }
    }
  }
</script>

最终效果：

 这个方法生成excel非常简单，但是也存在很大的局限性，比如不能在excel里保存图片，也无法设置excel样式，仅仅只能写入内容。

数据源是一个二维数组，二维数组的每一行，其实也就是excel的每一行，每一行的元素个数可以不相同，也可以写成对象数组的形式。

网上很多案例都是用这种方法生成excel，确切的说是csv文件，强行把 link.download =  "SPC报告查询结果.csv" 改成 link.download =  "SPC报告查询结果.xlsx"，用WPS可以打开，但是用office打不开，如果对文件的样式没要求，文件不包含图片，不要随便修改文件后缀名了。

另外很多网友反馈说这种方法不适合数据量太大的情况，容易卡死。经过一天的辛苦研究，终于找到了另外的方法生成excel，并且还可以设置样式，整理在下面的博客里了。

vue:使用xlsx-style插件创建带样式的excel文件_粉末的沉淀的博客-CSDN博客