vue导出excel 纯前端

灰太狼 2023-01-10 14:44 219阅读 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 条评论，219人围观）

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

相关阅读

相关 Vue实现在前端导出Excel

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

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

相关 vue-json-excel前端导出excel教程

> vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库。 > > 个人认为，导出在前端做，不是特别合适，最好是后端提供导出下载文件接口，如果后端

系统管理员/ 2023年10月01日 19:23/ 0 赞/ 42 阅读

相关 xlsx库实现纯前端导入导出Excel

![format_png][] 前言最近做了前端导入、导出 Excel 的需求，用到了`js-xlsx`这个库，该库文档提供的用例很少，并不是很友好。本文总结一下我是

今天药忘吃喽~/ 2023年09月30日 16:58/ 0 赞/ 22 阅读

相关 Vue纯前端导出数据到Excel电子表格

参考：[https://segmentfault.com/a/1190000012117303\comment-area][https_segmentfault.com_a_1

た入场券/ 2023年07月13日 15:21/ 0 赞/ 54 阅读

相关纯前端js导出Excel文件

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

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

相关 vue导出excel 纯前端

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

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

相关 vue前端导出excel

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

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

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

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

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

相关 vue 导出Excel

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

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

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

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

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