vue excel文件的导入读取和下载

Posted cp-cookie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue excel文件的导入读取和下载相关的知识,希望对你有一定的参考价值。

导读:后台管理平台经常要上传文件读取文件的内容和导出数据表,因此需要依赖第三方插件xlsx

1、安装依赖

npm install xlsx -S

2、在目标组件vue中引入

import XLSX form ‘xlsx

3、简单的创建并导出数据表

data() {
  return {
    xlxsData: [
     {
      ‘type‘: ‘颜色‘,
      ‘ID‘: ‘34234‘,
      ‘name‘: ‘Light Pink‘
     }
    ]
  }
},
methods: { downExcle() {
  const outputXlsxFile = (data, header, xlsxName) => {
    const ws = XLSX.utils.json_to_sheet(data, header)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, xlsxName)
    XLSX.writeFile(wb, xlsxName + ‘.xlsx‘)
  };

  // 理想数据模型
  //let data = [
  //  {
  //    "类型": "颜色",
  //    "id": "34234",
  //    "名称": "Light Pink"
  //  }
  //];

  // 实际数据模型 this.xlxsData
  const mapList = {
    "type": "类型",
    "id": "ID",
    "name": "名称"
  }
  let header = {
    header: Object.value(this.xlxsData) // 获取中文表头
  }
  
  outputXlsxFile(this.filterJson(mapList), header, ‘标签批量模版‘)
 },
 filterJson(mapList) {
  
let res = [];
  for (let key in mapList) {
    let obj = {}
    this.xlxsData.map(item => {
      obj[mapList[key]] = item[mapList[key]]  // 保持xlxsMap的键和源数据一致,否则会有数据会缺少
    })
    res.push(obj)
   }
   return res
  }
 }

注: 一般data的格式不会是中文键名,因此需要过滤函数,进行转化

 4、导入并读取excel文件

<el-button type="primary" icon="el-icon-upload2" size="mini" @click="uploadFile">批量导入</el-button>
data() {
  return {
    xlscList: [], xlscTitle: {
     "类型": "type" "ID": "id", "名称": "name" },
  }
},
methods:{
  uploadChange(file) { let self = this; const types = file.name.split(‘.‘)[1]; const fileType = [‘xlsx‘, ‘xlc‘, ‘xlm‘, ‘xls‘, ‘xlt‘, ‘xlw‘, ‘csv‘].some(item => { return item === types }); if (!fileType) { this.$message.error(‘文件格式错误,请重新选择文件!‘) } this.file2Xce(file).then(tab => { // console.log(tab) if (tab && tab.length > 0) { tab[0].sheet.forEach(item => { let obj = {}; for (let key in item) { obj[self.xlscTitle[key]] = item[key]; } self.xlscList.push(obj); }); // console.log(self.xlscList) if (self.xlscList.length) { this.$message.error(‘上传成功‘) } else { this.$message.error(‘空文件或数据缺失,请重新选择文件!‘) } } }) },
   file2Xce(file) { return new Promise(function(resolve, reject) { const reader = new FileReader(); reader.onload = function(e) { const data = e.target.result; this.wb = Xlsx.read(data, { type: "binary" }); const result = []; this.wb.SheetNames.forEach(sheetName => { result.push({ sheetName: sheetName, sheet: Xlsx.utils.sheet_to_json(this.wb.Sheets[sheetName]) }) }) resolve(result); } reader.readAsBinaryString(file.raw); }) }
}

注: 以上的导出的excel不能自定义样式,需要一样插件xlsx-style, 喜欢的同学可以自行研究

以上是关于vue excel文件的导入读取和下载的主要内容,如果未能解决你的问题,请参考以下文章

如何用java导入Excel数据到数据库?

Java添加读取Excel公式

vue项目中如何把表格导出excel表格

vue导入的xlsx没有数据

vue工具组件 ——实现导入导出excel文件

Vue项目导入excel表,自动下载导入失败数据的excel表(使用ElementUI upload组件,自定义导入excel表)