关键词：

Vue小模块之功能全面的表格（九）表格数据的Excel导出

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

服务器端

使用officegen来生成excel文件

var officegen = require('officegen')
var fs = require('fs')

const status = ['未开始', '进行中', '搁置', '完成']

router.route('/download').post((req, res) => 
    var todos = req.body
    var data = []
    var heads = ['学习书籍', '作者', '学习计划状态', '学习完成时间']

    data.push(heads)
    todos.forEach((todo) => 
        var tmp = []
        tmp[0] = todo.name
        tmp[1] = todo.author.join(',')
        tmp[2] = status[todo.status]
        tmp[3] = new Date(todo.completeDate).toLocaleDateString()
        data.push(tmp)
    )

    var xlsx = officegen('xlsx')
    var sheet = xlsx.makeNewSheet()
    sheet.data = data

    xlsx.generate(res)
    // 如果将文件导出到服务器本地则采用以下代码
    // xlsx.generate(fs.createWriteStream('out.xlsx'))
)

客户端

为下载按钮绑定以下方法

downloadTodos() 
    this.$ajax(
        method: 'post',
        url: 'todos/download',
        responseType:'blob',
        data: this.filtedData
    ).then((res) => 
        var blob = new Blob([res.data], type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8') 
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) //创建下载的链接
        downloadElement.href = href
        downloadElement.download = '导出列表.xlsx' //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
    )
    .catch((err) => this.$notify(
        type: 'error',
        message: err
    ))

运行结果

点击下载按钮，可以看到excel文件被下载

打开excel查看数据

小结

本节完成了Excel的导出功能，下个阶段将完成Excel的导入功能

vue小模块之功能全面的表格创建表格(代码片段)

Vue小模块之功能全面的表格（二）创建表格技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据库mongodbmongo... 查看详情

vue小模块之功能全面的表格实现带有数组输入的表单(代码片段)

Vue小模块之功能全面的表格（六）实现带有数组输入的表单技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式... 查看详情

vue小模块之功能全面的表格用element创建基本页面布局(代码片段)

Vue小模块之功能全面的表格（一）用Element创建基本页面布局技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布... 查看详情

vue小模块之功能全面的表格对话框的弹出和关闭(代码片段)

Vue小模块之功能全面的表格（五）对话框的弹出和关闭技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据... 查看详情

请问有没有与excel配套的c语言编程软件，比如可以读取excel表格中的数据，并将处理结果导回到excel表格中

...来开发office应用程序可以使用Visualstudio开发环境中的众多功能和CLR提供的内存管理，垃圾回收等功能。正如其名，VSTO是一套用于创建自定义Office应用程序的VisualStudio工具包。VSTO使你可以用VisualBasic或者VisualC#扩展Office应用程序(... 查看详情

python实现excel邮件合并

...内容，为便于使用，单独将字符串替换功能写为函数xlrd模块，常用于读取xls和xlsx格式excel表格xlwt模块，常用于写入xls格式excel表格xlutils模块，可将xlrd.Book对象转为xlwt.Workbook对象，从而实现对已有excel表格的写入功能方法1只能生... 查看详情

vue导出excel数据表格功能(代码片段)

前端工作量最多的就是需求，需求就是一直在变，比如当前端数据写完之后，需要用Excel把数据下载出来。第一步安装依赖包,需要把代码下载你的项目当中　　cnpminstall  file-saver　　cnpminstall xlsx    cnpmin... 查看详情

vue中element的table表格导入与导出为excel表格的实现(代码片段)

...excel所需依赖和按需加载2.2vue-element-admin提供的导出功能模块2.3懒加载引入js-xlsx2.4导出数据结构的处理2.5复杂表头的实现一、导入2.1安装xlsx插件$npmixlsx@0.17.02.2新建导入功能组件新建组件UploadExcel/index.vue<template><divclass... 查看详情

excel表格数据丢失如何快速恢复？

...格数据丢失了可以恢复吗？EasyRecovery数据恢复软件是一款功能十分强大而全面的软件，该软件几乎支持现在市面上的所有操作系统。该软件不但支持恢复不同存储介质数据，还包括文档、表格、图片、音视频等各种文件数据。目... 查看详情

大家都喜欢用啥思维导图工具呢？

...工具，在线甘特图，项目计划，进度跟踪，团队协作。云表格（表格）：【伙伴云表格】在线excel表格超级表格（表格）：超级表格:多人协作云端表格,在线表格,在线表单,在线Excel,在线Office,手机办公班牛（表格）：班牛_移动电... 查看详情

那个excel表格导到志愿填报系统里面怎么导?

EXCEL表格想要导入到志愿填报系统里面的话，只需要把想要导入的表格进行保存，保存好记住保存路径，然后打开志愿填报系统找到保存的表格进行上传就可以了参考技术A志愿填报系统里，找到导入，先浏览选择做好的表格，选... 查看详情

如何将一个网页中自己想要的数据导入到excel表格中

...入主界面后点击最上方菜单栏中的数据。2.在数据一栏的功能框中我们点击“获取额外数据”选项。这个功能是可以让我们直接导入网页中的表格的。3.如果我们是在线导入的话 查看详情

excel表格如何排版打印比较全面的视频教程今晚限量秒杀

如何打印出漂亮的Excel表格?在办公的时候经常需要打印Excel表格,在Excel打印的时候,我们很可能需要调整格式,行间距什么的,现整理出课程详细章节纲要，课程教程地址：http://edu.51cto.com/sd/46462课程章节计划表：第一章：输出打印... 查看详情

bootstrap表格之多选数据的获取

使用表格的时候经常会用到多选的功能，比较常用，下面写一个小Dome记录一下   如下：单击监督执法按钮之后，需要获取选中行数据，传值到后台进行处理 一、获取选择行的数据 btnJdzf是按钮id；table是表格的... 查看详情

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

...天添加一点小笔记。　　项目中将后台返回的数据v-for到表格中，然后需要将这个表格导出为EXCEL　　只说怎么做。　　一、需要安装三个依赖：       npminstall-Sfile-saverxlsx      & 查看详情

spreadjs全面支持angular2，v10.2版本即将发布

... 纯前端表格控件是基于HTML5的JavaScript电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel导入/导出等功能，适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发。 查看详情

vue项目实现导入导出excel表格功能(代码片段)

前提:在我的项目中我使用的是ElementUi前端UI框架，用到的是里面的Upload上传组件。第一步：需要安装三个依赖npminstall-Sfile-saverxlsx （这里其实安装了2个依赖）npminstall-Dscript-loader 第二步：在main.js文件中全局导入挂载xlsx插... 查看详情

excel表格的应用之简单的数据可视化

上面的为我们需要的手长与身高的数据上面的是我们的数据可视化之后的点状图我们需要先选中我们需要的数据表然后点击我们插入中的推荐图表的选项点开后会弹出这个界面然后我们只需要选择char进行插入就好了  查看详情