[JavaScript知识库] Vue—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue——execl导出 -> 正文阅读

[JavaScript知识库]Vue——execl导出

方案一：vue-json-excel

//安装依赖
cnpm i -S vue-json-excel

//导入组件
import JsonExcel from "vue-json-excel";
export default {
  components: { JsonExcel },
 }

//使用
<JsonExcel :fields="fields" :data="data" title="导出标题" defaultValue="-"> 导出 </JsonExcel>

//参数
export default {
  components: { JsonExcel },
  data() {
    return {
      name:"导出的文件名.xls",
      fields:{
        "姓名":"name",
        "年龄":"age"
      },
      data:[
        {name:"张三",age:"18"},
        {name:"李四",age:"19"},
        {name:"赵五",age:"20"},
      ]
    };
  },
};

属性名	类型	备注
data	array	导出的数据
fields	object	设置要导出的字段,没有设置按data数据导出
defaultValue	string	导出项数据为空时显示的信息
type	string	导出的文件后缀(xls,csv)默认xls
name	string	导出的文件名
title	string	表格第一行标题

更多配置可前往https://www.npmjs.com/package/vue-json-excel

方案二：xlsx

//安装插件
cnpm i -S xlsx

// 数据
const srcData = [
  ["name", "gender", "age"],
  ["zhangsan", "male", 23],
  ["lisi", "female", 24],
  ["wangwu", "male", 25],
];
// 导出excel
// 创建workbook对象
const wb = XLSX.utils.book_new();
// 将srcData转换为worksheet
const ws = XLSX.utils.aoa_to_sheet(srcData);
ws["!merges"] = [
  // 设置A1-C1的单元格合并
  { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } },
];
// worksheet 加入workbook
XLSX.utils.book_append_sheet(wb, ws, "sheet1");
// 导出
XLSX.writeFile(wb, "fileName.xls");