vue导出excel 纯前端

灰太狼 2023-01-10 14:44 164阅读 0赞

下载

npm install vue-json-excel --save

使用

import JsonExcel from 'vue-json-excel'
    // Vue.component('downloadExcel', JsonExcel) 全局导入 不推荐

<template>
      <div>
        <download-excel
          class="export-excel-wrapper"
          :data="json_data"
          :fields="json_fields"
          name="陈奎宁.xls"
        >
          <el-button type="primary" size="small">导出EXCEL</el-button>
        </download-excel>
      </div>
    </template>
    
    <script>
    import JsonExcel from "vue-json-excel";
    export default { 
      components: { 
        downloadExcel: JsonExcel,
      },
      data() { 
        return { 
          //定义表格 字段
          json_fields: { 
            '姓名': "name",
            '年龄': "age",
            '城市': "city",
            '爱好':'ai'
          },
          //table数据 需要和字段对应
          json_data: [],
          //解析excel utf-8 不然很可能导致乱码
          json_meta: [
            [
              { 
                " key ": " charset ",
                " value ": " utf- 8 ",
              },
            ],
          ],
        };
      },
      methods:{ 
      // 模拟获取数据 赋值给 data
        getTable(){ 
          this.json_data = [
            { 
              name:'陈奎宁',
              age:18,
              city:'郑州',
              ai:'狗'
            }
          ]
        }
      },
      created(){ 
        this.getTable();
      }
    };
    </script>
    
    <style>
    </style>

![在这里插入图片描述][20210125100856772.png]

[20210125100856772.png]: /images/20221119/bd3d5fb167a7461c8ba17d79474cb56e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue实现在前端导出Excel

安装依赖进入项目文件夹，打开cmd或者在Webstorm中的Terminal中输入： npm install -S file-saver xlsx n

た入场券/ 2023年10月18日 10:55/ 0 赞/ 105 阅读

相关纯前端js导出Excel文件

项目中有的时候需要咱们前端来导出Excel表格还是需要了解怎么做的，当然了最好还是让后端做导出话不多说，上步骤 1. 安装插件 vue-json-excel

向右看齐/ 2023年01月13日 05:44/ 0 赞/ 133 阅读

相关 vue导出excel 纯前端

下载 npm install vue-json-excel --save 使用 import JsonExcel from 'vue-json-excel

灰太狼/ 2023年01月10日 14:44/ 0 赞/ 165 阅读

相关 vue 导出Excel

目录 vue 实现前端导出Excel 安装依赖添加js文件实现代码 vue 实现前端导出Excel 安装依赖

我会带着你远行/ 2022年12月27日 08:00/ 0 赞/ 185 阅读

相关 vue导出excel

1.安装相关依赖 npm install file-saver -S npm install xlsx -S npm install script-l

野性酷女/ 2022年12月04日 09:18/ 0 赞/ 170 阅读

相关 vue前端导出excel

vue前端导出excel教程，如此简单解决方法： 1.安装依赖，如果下载慢，npm也可以换成cnpm npm install file-saver -S npm

小咪咪/ 2022年12月04日 09:15/ 0 赞/ 203 阅读

相关 vue项目中纯前端Excel文件(.xlsx)的导入导出

目录 > 应用场景 > Excel文件导入 > Excel文件导出应用场景在需要展示大量数据的表格中，一条条插入显然有些鸡肋。此时我们会想到使用文件的

你的名字/ 2022年10月06日 01:57/ 0 赞/ 197 阅读

相关 vue 导出Excel

[原博主地址][Link 1] [https://blog.csdn.net/u010427666/article/details/79208145][Link 1]

我就是我/ 2022年03月02日 01:20/ 0 赞/ 289 阅读

相关如何使用JavaScript实现纯前端读取和导出excel文件

[https://www.cnblogs.com/liuxianan/p/js-excel.html][https_www.cnblogs.com_liuxianan_p_js

分手后的思念是犯贱/ 2022年02月03日 03:29/ 0 赞/ 209 阅读

相关 js 实现纯前端将数据导出excel

上代码： <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出c

约定不等于承诺〃/ 2021年08月13日 23:37/ 0 赞/ 430 阅读