实现element表格导出为excel表格

实现element表格导出为excel表格解决问题准备工作结果代码解决问题vue使用elementUI，做出来的表格需要导出为excel表格。准备工作1、安装相关依赖cnpm install --save xlsx file-saver2、组件里头引入import FileSaver from 'file-saver'import XLSX from 'xlsx'...

刘学习00

14879人浏览 · 2019-04-02 13:16:55

刘学习00 · 2019-04-02 13:16:55 发布

实现element表格导出为excel表格

解决问题
准备工作
结果
代码

解决问题

vue使用elementUI，做出来的表格需要导出为excel表格。
页面展示

准备工作

1、安装相关依赖

cnpm install --save xlsx file-saver

安装依赖
2、组件里头引入

  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

在这里插入图片描述
3、组件methods里写一个方法

     exportExcel () {
         /* out-table关联导出的dom节点  */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '药品信息.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },

4、在页面中编辑按钮

<button @click="exportExcel()">导出</button>

在这里插入图片描述

结果

在这里插入图片描述

代码

<template>
    <div style=" border: 1px solid #eee">
      		<button @click="exportExcel()">导出</button>
            <h1 style="text-align: center; font-size: 20px;margin-block-start: 0em;    margin-block-end: 0em;">药品管理</h1>
            <el-table
                    :data="tableData3"
                    style="width: 100%"
                    height="530"
            id="out-table">
                <el-table-column
                        fixed
                        prop="drug_name"
                        label="药品名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drug_id"
                        label="药品编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="drug_common"
                        label="药品通用名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drug_type"
                        label="药品类别"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drug_unit"
                        label="药品单位"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="drug_num"
                        label="药品数量"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="drug_wholeSale"
                        label="药品批发价"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="drug_sale"
                        label="药品零售价"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="drug_vipSale"
                        label="药品会员价"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="drug_norm"
                        label="药品规格"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drug_validity"
                        label="药品有效期"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drug_approval"
                        label="药品批准文号"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="drug_factory"
                        label="药品生产厂家"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="drug_illegal"
                        label="是否违禁药"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="drug_illnum"
                        label="限购数量"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="drug_code"
                        label="药品条形码号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drug_formulation"
                        label="药品剂型"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="drug_remarks"
                        label="备注"
                        width="120">
                </el-table-column>
            </el-table>
        </div>

</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
export default {
  name: 'DrugInformation',
  data () {
    return {
      tableData3: [{
        drug_name: '阿胶',
        drug_common: '阿胶',
        drug_id: '072223',
        drug_type: '保健药',
        drug_unit: '盒',
        drug_num: 566,
        drug_wholeSale: 30,
        drug_sale: 50,
        drug_vipSale: 40,
        drug_norm: '每盒4*12粒',
        drug_approval: '鲁东卫食准字(2002)第GQ0004号',
        drug_formulation: '口服液',
        drug_factory: '山东东阿阿胶股份有限公司',
        drug_illegal: '否',
        drug_illnum: '无',
        drug_code: '6921168594368',
        drug_validity: '2020-1-1',
        drug_remarks: '无',
      }, {
        drug_name: '阿胶',
        drug_common: '阿胶',
        drug_id: '072223',
        drug_type: '保健药',
        drug_unit: '盒',
        drug_num: 566,
        drug_wholeSale: 30,
        drug_sale: 50,
        drug_vipSale: 40,
        drug_norm: '每盒4*12粒',
        drug_approval: '鲁东卫食准字(2002)第GQ0004号',
        drug_formulation: '口服液',
        drug_factory: '山东东阿阿胶股份有限公司',
        drug_illegal: '否',
        drug_illnum: '无',
        drug_code: '6921168594368',
        drug_validity: '2020-1-1',
        drug_remarks: '无',
      }, {
        drug_name: '阿胶',
        drug_common: '阿胶',
        drug_id: '072223',
        drug_type: '保健药',
        drug_unit: '盒',
        drug_num: 566,
        drug_wholeSale: 30,
        drug_sale: 50,
        drug_vipSale: 40,
        drug_norm: '每盒4*12粒',
        drug_approval: '鲁东卫食准字(2002)第GQ0004号',
        drug_formulation: '口服液',
        drug_factory: '山东东阿阿胶股份有限公司',
        drug_illegal: '否',
        drug_illnum: '无',
        drug_code: '6921168594368',
        drug_validity: '2020-1-1',
        drug_remarks: '无',
      }, {
        drug_name: '阿胶',
        drug_common: '阿胶',
        drug_id: '072223',
        drug_type: '保健药',
        drug_unit: '盒',
        drug_num: 566,
        drug_wholeSale: 30,
        drug_sale: 50,
        drug_vipSale: 40,
        drug_norm: '每盒4*12粒',
        drug_approval: '鲁东卫食准字(2002)第GQ0004号',
        drug_formulation: '口服液',
        drug_factory: '山东东阿阿胶股份有限公司',
        drug_illegal: '否',
        drug_illnum: '无',
        drug_code: '6921168594368',
        drug_validity: '2020-1-1',
        drug_remarks: '无',
      }, {
        drug_name: '阿胶',
        drug_common: '阿胶',
        drug_id: '072223',
        drug_type: '保健药',
        drug_unit: '盒',
        drug_num: 566,
        drug_wholeSale: 30,
        drug_sale: 50,
        drug_vipSale: 40,
        drug_norm: '每盒4*12粒',
        drug_approval: '鲁东卫食准字(2002)第GQ0004号',
        drug_formulation: '口服液',
        drug_factory: '山东东阿阿胶股份有限公司',
        drug_illegal: '否',
        drug_illnum: '无',
        drug_code: '6921168594368',
        drug_validity: '2020-1-1',
        drug_remarks: '无',
      }, {
        drug_name: '阿胶',
        drug_common: '阿胶',
        drug_id: '072223',
        drug_type: '保健药',
        drug_unit: '盒',
        drug_num: 566,
        drug_wholeSale: 30,
        drug_sale: 50,
        drug_vipSale: 40,
        drug_norm: '每盒4*12粒',
        drug_approval: '鲁东卫食准字(2002)第GQ0004号',
        drug_formulation: '口服液',
        drug_factory: '山东东阿阿胶股份有限公司',
        drug_illegal: '否',
        drug_illnum: '无',
        drug_code: '6921168594368',
        drug_validity: '2020-1-1',
        drug_remarks: '无',
      }]
    }
  },
  methods:{
    exportExcel () {
      /* out-table关联导出的dom节点 */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '药品信息.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined')
          console.log(e, wbout)
      }
      return wbout
    },
  }
}
</script>

<style scoped>
    .el-table td, .el-table th {
        padding: 2px 0;
        min-width: 0;

        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
    }
    .el-table thead {
        color: black;
    }
    table{
        border-spacing: 0px;
    }
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

刘学习00

@weixin_38457055

已为社区贡献2条内容