Vue2.0---将页面中表格数据导出excel (详细)

 

这是教程

  项目中,后台数据生成的表格如何导出成excel?

  一、需要安装三个依赖:

npm install -S file-saver xlsx

npm install -D script-loader

  二、项目中新建一个文件夹:(vendor---名字任取)

    里面放置两个文件Blob.js 和 Export2Excel.js

    百度可下载。

  三、在.vue文件中
       写这两个方法:其中list是表格的内容
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require(‘../../vendor/Export2Excel‘);
        const tHeader = [‘序号‘, ‘IMSI‘, ‘MSISDN‘, ‘证件号码‘, ‘姓名‘]; //对应表格输出的title
        const filterVal = [‘ID‘, ‘imsi‘, ‘msisdn‘, ‘address‘, ‘name‘]; // 对应表格输出的数据
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, ‘列表excel‘); //对应下载文件的名字
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

    

   四、按钮导出调用export2Excel方法

 

     注:如果webpack报解析错误:

      在build----webpack.base.conf.js中resolve的alias加入 ‘vendor‘: path.resolve(__dirname, ‘../src/vendor‘),
      即可解决
      alias是配置别名

      

    Blob.js和 Export2Excel.js文件:链接: https://pan.baidu.com/s/1eRFnegU 密码: 7ijr

时间: 2024-10-28 07:35:49

Vue2.0---将页面中表格数据导出excel (详细)的相关文章

将页面中表格数据导出excel格式的文件(vue)

近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安装可能会出现某些错误,可以使用cnpm): npm install file-saver --save // 保存文件用 npm install xlsx --save // 转二进制用 npm install script-loader --save-dev // xlsx核心文件 2.下载两个核

Vue2.0---将页面中表格数据导出excel

这不是教程,是随笔. 项目中将后台返回的数据v-repeat到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. 百度可下载. 三.在.vue文件中     写这两个方法:其中list是表格的内容 export2Excel(

前端表格数据导出excel

使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableExport.jquery.plugin 2.   修改tableExport.js文件,使其支持中文 /*The MIT License (MIT) Original work Copyright (c) 2014 https://github.com/kayalshri/ Modified work

在窗体中把DataGridView中的数据导出Excel

//DataGridView导出Excel        private void bt_Excl_Click(object sender, EventArgs e)        {            SaveFileDialog saveFileDialog = new SaveFileDialog(); saveFileDialog.Filter = "Microsoft Excel 工作表 (.xls)|*.xls";            saveFileDialog.F

C#数据导出Excel详细介绍

概要: excel导出在C#代码中应用己经很广泛了,我这里就做些总结,供自己和读者学习用. Excel知识点.一.添加引用和命名空间 添加Microsoft.Office.Interop.Excel引用,它的默认路径是C:\Program Files\Microsoft Visual Studio 9.0\Visual Studio Tools for Office\PIA\Office12\Microsoft.Office.Interop.Excel.dll 代码中添加引用using Micr

C#读取Excel表格数据到DataGridView中和导出DataGridView中的数据到Excel

其实想在datagridview中显示excel表格中的数据跟读取数据库中的数据没什么差别,只不过是创建数据库连接的时候连接字段稍有差别. private void btnShow_Click(object sender, EventArgs e) { OpenFileDialog fd = new OpenFileDialog();//首先根据打开文件对话框,选择excel表格 ofd.Filter = "表格|*.xls";//打开文件对话框筛选器 string strPath;/

机房收费系统之vb中的MSFlexGrid控件中的数据导出为Excel的步骤

MSFlexGrid控件中的数据导出为Excel表格的方法有很多,我觉得它们都大同小异,总起来说就是vb先调用Excel,然后再将数据导入进去.在数据导出的过程中,我的收获如下,下面是我把MSFlexGrid控件的数据导出到Excel中的步骤. 1 首先确保 在工程中引用Microsoft Excel 14.0 Object Library   和  Microsoft ActiveX Data Objects 2.6 Libray 代码部分, <span style="font-size

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

JavaScript将网页表格数据导出为Excel文件

不使用服务器端的技术,直接使用js将网页中的表格数据导出为excel文件,支持所有浏览器:前提条件是:网页中的表格数据必须使用table标签排版且不能有任何错误. <!DOCTYPE HTML> <html> <head> <title>javascript exportExcel</title> </head> <body> <table id="name" border="1&quo