前端下载excel表格文件——flie-saver导出类型为csv或者xlsx

前言：这边导出表格数据是纯前端自己导出数据
下面方法可以导出格式为xlsx或者csv格式
首先要下载file-saver第三方依赖
npm install file-saver --save
然后直接上代码啦，拿来粘贴复制就行了

//index.vue文件中
<el-button size="mini" class="downloadData" @click="handleDownloadData">导出excel</el-button>async handleDownloadData() {// 导出表格的表头设置;let allColumns = this.tableTitle;let list = [];this.loading = true;if (!this.total) {this.$message.warning('暂无数据，无法导出');return;}//因为这个file-saver只能下载当前页面的，所以在下载的时候只能重新请求一次表格数据，把返回表格的总数居给上参数pageSize，这样就可以完美导出表格数据啦await searchData({...this.params,page: 1,pageSize: this.total,}).then(res => {list = res.data.list;}).finally(() => {this.loading = false;});exportCsvDowload(list, allColumns, `demo.csv`);//表格后缀名也可以改成xxx.xlsx},


```javascript
在utils.js中，要记得在文件中引用呀~~~~~
// 导出scv或excel
//data是表格数据，columnArrData是表头数据，excelName是导出表格名字
export function exportCsvDowload(data, columnArrData, excelName) {const columnArr = columnArrData.map(one => one.label);const columnArrKey = columnArrData.map(one => one.value);let str = columnArr.join(',');// 通过循环拿出data数据源里的数据，并塞到str中for (const item of data) {str += '\n ';for (const item1 of columnArrKey) {str += `${(typeof item[item1] === 'string' && item[item1].replace(/[\n\r\s\t,]/g, ' ')) || item[item1]},`;}}// Excel打开后中文乱码添加如下字符串解决const exportContent = '\uFEFF';const blob = new Blob([exportContent + str], {type: 'text/plain;charset=utf-8',});FileSaver.saveAs(blob, excelName, true);
}

上面方法有一个缺点就是只能导出表格当前页数据。如果想要导出表格所有数据，需要重新请求一次表格数据，参数是表格数据返回来的total数据。
上面这种方法是我亲测有效的！！！
下面第二种是我朋友推荐的方法，测试了也是完全ok的~~~~

<button onclick="ExportExcel('测试123')">下载excel</button>function ExportExcel(name) {// 这是标题let data = '序号,内容,姓名,年龄\n';// 这是内容for (let i = 0; i < 100000; i++) {data += i.toString() // 第一列+ ',这是测试内容, 张三' // 第二列+ i.toString() + ','  // 第三列+ Math.floor(Math.random() * 80 + 10) + ',\n' // 第四列}console.log(data)//由于Excel单元格对于数字只支持15位，且首位为0会舍弃 建议用 =“数值”let blob = new Blob([data], {type: "text/plain;charset=utf-8"});//解决中文乱码问题blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});const object_url = window.URL.createObjectURL(blob);const link = document.createElement("a");link.href = object_url;link.download = name + ".xlsx";document.body.appendChild(link);link.click();document.body.removeChild(link);}

前端下载excel表格文件——flie-saver导出类型为csv或者xlsx相关推荐

vue实现纯前端导入与解析excel表格文件，导出Excel
一.安装相关依赖 npm install --save xlsx file-saver 二.使用 import * as XLSX from 'xlsx/xlsx.mjs' const FileSav ...
java下载Excel表格(ajax处理流文件)
java下载Excel表格(ajax处理流文件) 遇到的问题: ① 导出Excel,处理大量的数据 ② 后端使用Apache POI中的SXSSFWorkbook导出功能,不使用xlsx.core.m ...
利用EasyExcel完整的springboot +vue前后端导出并下载excel表格
文章目录写在前面正文 1. springboot后端引入easyexcel及使用 1.1 引入依赖 1.2 接口serviceImpl方法 1.3 提供一个对list集合去重的方法(根据相同key ...
js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
Java，导出Excel表格文件
引用三方封装的技术框架 Alibaba/EasyExcel JAVA 解析Excel工具EasyExcel Hutool Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的 ...
基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出
目录基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出一.导入和导出二.导出数据为excel实现过程三.将excel中的数据导入到数据库中基于SpringB ...
vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
下载excel表格后缀名为.do形式
最近用POI导出数据到excel,文件可以在浏览器下载,只是下载excel表格后缀名为.do形式.这里的do是我web.xml配置的filter过滤去的拦截方式,事实证明,这里配置什么拦截方式,后缀名 ...
html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...

前端下载excel表格文件——flie-saver导出类型为csv或者xlsx

前端下载excel表格文件——flie-saver导出类型为csv或者xlsx相关推荐

最新文章

热门文章