CV可以实现的excel的导入、导出、下载以及文本的导出

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

嗨嗨今天又是新的一天，今天的需求是轻松实现excel的导入导出和下载哦，话不多说，直接上代码！

导入与下载excel

1、html结构

<template>
  <d2-container type="card">
     <el-button @click="download">
        <d2-icon name="download"/>
        下载演示 .xlsx 表格
      </el-button>
      <br/>
    <div class="d2-mb">
      <el-upload :before-upload="handleUpload" action="default">
        <el-button type="success">
          <d2-icon name="file-o"/>
          选择要导入的 .xlsx 表格
        </el-button>
      </el-upload>
    </div>
    <el-table v-bind="table">
      <el-table-column
        v-for="(item, index) in table.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label">
      </el-table-column>
    </el-table>
  </d2-container>
</template>

2、js代码实现

<script>
import Vue from 'vue'
import pluginImport from '@d2-projects/vue-table-import'
Vue.use(pluginImport)

export default {
  name: 'tableXls',
  data () {
    return {
      table: {
        columns: [],
        data: [],
        size: 'mini',
        stripe: true,
        border: true
      }
    }
  },
  methods: {
  //导入
    handleUpload (file) {
      this.$import.xlsx(file)
        .then(({ header, results }) => {
          this.table.columns = header.map(e => {
            return {
              label: e,
              prop: e
            }
          })
          this.table.data = results
        })
      return false
    },
    //下载
    download () {
      window.open('https://cdn.d2.pub/files/d2-admin/demo-table.xlsx')
    }
  }
}
</script>

导出excel

1、html结构

<template>
  <d2-container type="card">
    <template slot="header">导出表格</template>
    <div class="d2-mb">
      <el-button type="primary" @click="exportCsv">
        <d2-icon name="download"/>
        导出 CSV
      </el-button>
      <el-button type="primary" @click="exportExcel">
        <d2-icon name="download"/>
        导出 Excel
      </el-button>
    </div>
    <el-table v-bind="table" style="width: 100%">
      <el-table-column
        v-for="(item, index) in table.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label">
      </el-table-column>
    </el-table>
  </d2-container>
</template>

2、js代码实现

<script>
import Vue from 'vue'
import pluginExport from '@d2-projects/vue-table-export'
Vue.use(pluginExport)
export default {
  name: 'tableEx',
  data () {
    return {
      table: {
        columns: [
          { label: 'ID', prop: 'id' },
          { label: '名称', prop: 'name' },
          { label: '创建日期', prop: 'creatDate' },
          { label: '地址', prop: 'address' },
          { label: '邮编', prop: 'zip' }
        ],
        data: [
          { id: 1, name: 'Lucy', creatDate: '2020-05-07', address: 'Address', zip: '000000' }
        ],
        size: 'mini',
        stripe: true,
        border: true
      }
    }
  },
  methods: {
    exportCsv (params = {}) {
      this.$export.csv({
        columns: this.table.columns,
        data: this.table.data
      })
        .then(() => {
          this.$message('导出CSV成功')
        })
    },
    exportExcel () {
      this.$export.excel({
        columns: this.table.columns,
        data: this.table.data,
        header: '导出 Excel',
        merges: ['A1', 'E1']
      })
        .then(() => {
          this.$message('导出表格成功')
        })
    }
  }
}
</script>

你以为到这里就结束了？？？？nonono还要下载依赖包哦

 "@d2-projects/vue-table-export": "^1.1.3",  //导入
 "@d2-projects/vue-table-import": "^1.0.1",  //导出

哈哈哈哈还没结束，额外给大家再来一个导出txt需求

导出文本

1、html结构

<template>
  <d2-container type="card">
    <template slot="header">导出文本</template>
    <el-input
      type="textarea"
      :autosize="{minRows: 2, maxRows: 4}"
      placeholder="请输入内容 然后点击保存按钮导出文本文档"
      v-model="text">
    </el-input>
    <div class="d2-mt">
      <el-button type="primary" @click="exportTxt">
        <d2-icon name="download"/>
        保存为 txt
      </el-button>
    </div>
  </d2-container>
</template>

2、js代码实现

<script>
import Vue from 'vue'
import pluginExport from '@d2-projects/vue-table-export'
Vue.use(pluginExport)
export default {
  name: 'txtEx',
  data () {
    return {
      text: ''
    }
  },
  methods: {
    exportTxt () {
      // 校验是不是空
      if (this.text === '') {
        this.$message('虽然可以为空 但是出于体验不建议这样 还是写点东西吧')
        return
      }
      // 导出
      this.$export.txt({
        text: this.text,
        title: '文本'
      })
        .then(() => {
          this.$message('导出文本成功')
        })
    }
  }
}
</script>

好了，今天实现了三个需求，可以摸鱼了嘻嘻嘻嘻~~~