一、准备插件

下载地址（别人CSND 免费下载，好人一生平安）：https://download.csdn.net/download/hqtc0704/10642331

二、Export2Excel.js 插件的调用 Bolb.js

三、下载Excel，自己写个函数调用下面handleDownload函数

handleDownload() {this.downloadLoading = true;require.ensure([], () => {const {export_json_to_excel} = require('../../../../static/js/Export2Excel.js'); // 这个地址和页面的位置相关，这个地址是Export2Excel.js相对于页面的相对位置const tHeader = ["序号", "客户", "产品型号", "系列号", "销售日期", "备注"]; // 这个是表头名称 可以是iveiw表格中表头属性的title的数组const filterVal = ["index", "customerName", "machineModel", "seriesNumber", "shipmentTime", "remarks"]; // 与表格数据配合 可以是iview表格中的key的数组const list = [{"index": "1","customerName": "你好1","machineModel": "你好2","seriesNumber": "你好3","shipmentTime": "你好4","remarks": "你好5"},{"index": "2","customerName": "hello world 1","machineModel": "hello world 2","seriesNumber": "hello world 3","shipmentTime": "hello world 4","remarks": "hello world 5"},]; //表格数据，iview中表单数据也是这种格式！const data = this.formatJson(filterVal, list)export_json_to_excel(tHeader, data, '列表excel'); // 列表excel，这个是导出表单的名称this.downloadLoading = false})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},

四、额外扩展

iview 的 table 组件有下载csv文件（CSV 逗号分隔值文件格式）的功能，其中的数据格式和Export2Excel.js 的格式相似，无缝连接。

csv文件解释：百度百科

获取Table表格数据，（不会用iview那就没办法了）

this.$refs.table.exportCsv({ filename: 'The original data' });

其它导出Excel 的做法：https://www.php.cn/js-tutorial-403064.html

Vue 前端下载 Excel相关推荐

vue前端下载excel文件
// html <el-button type="primary" plain @click="frontDownload">本地下载</el ...
vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
前端下载excel表格文件——flie-saver导出类型为csv或者xlsx
前言:这边导出表格数据是纯前端自己导出数据下面方法可以导出格式为xlsx或者csv格式首先要下载file-saver第三方依赖 npm install file-saver --save 然后直接 ...
Java jxl在excel模板中动态加入数据，及前端下载excel的例子
写了一个小demo,把这样一个流程跑通,前端通过点击一个下载按钮,根据前端显示的数据,下载Excel文件到本地. 先分析一下整个流程前端通过ajax的post请求,传递json字符串到后台. 后台接 ...
Vue前端实现excel的导入、导出、打印功能
目录一.相关依赖下载二.excel导入功能三.table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格) 3.导出二维数据的table数据 4.导出合并单元格ta ...
前端下载excel文件功能的三种方法
1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...
vue前端下载本地excel文件
<a class="template-download" href="./存货周转率及存货金额目标录入模板.xlsx" download><i ...
vue 前端导出Excel表格（基础版 + 多级标题）纯前端导出
先看效果纯前端基础导出的Excel表格纯前端多级表头导出的Excel表格基础导出下面赋源代码 1.安装依赖 npm install vue-json-excel 2.在项目的入口 main.js ...

Vue 前端下载 Excel

一、准备插件

二、Export2Excel.js 插件的调用 Bolb.js

三、下载Excel，自己写个函数调用下面handleDownload函数

四、额外扩展

Vue 前端下载 Excel相关推荐

最新文章

热门文章