纯前端导出表格
Posted 野生切图仔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯前端导出表格相关的知识,希望对你有一定的参考价值。
前端 excel 表格导出
我们习惯了后端去处理表格,直接接口返回 ,那前端如何轻松的导出表格呢?
文章目录
Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐
/ | 使用 |
---|---|
兼容性 | 支持 vue、react 、angular 几乎兼容所有浏览器 (IE 8版本以上) |
使用 | 非常灵活 |
安装
npm install --save xlsx
① vue2 中使用
vue2 导出表格 |
const XLSX = require("xlsx"); //使用import有的属性无法找到
export function exportExcel(filename,data)
let exc = XLSX.utils.book_new(); // 初始化一个excel文件
let exc_data = XLSX.utils.aoa_to_sheet(data); // 传入数据 , 到excel
// 将文档插入文件并定义名称
XLSX.utils.book_append_sheet(exc, exc_data, filename);
// 执行下载
XLSX.writeFile(exc, filename + 'xlsx');
二:使用 👇 ( page.vue )
<template>
<button @click="download">下载表格</button>
</template>
<script>
import exportExcel from "./excelConfig";
export default
data()
return
exc_data:[
['第一列', '第二列' ,'第三列'],
['aa', 'bb' ,'cc'],
['dd', 'ee' ,'ff'],
]
;
,
methods:
download()
exportExcel('vue2导出的表格',this.exc_data);
,
,
;
</script>
三:效果如下 👇
② vue3 中使用
vue3 导出表格 |
import * as XLSX from 'xlsx'
export function exportExcel(filename,data)
let exc = XLSX.utils.book_new();
let exc_data = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(exc, exc_data, filename);
XLSX.writeFile(exc, filename + 'xlsx');
二:使用 👇 ( page.vue )
<template>
<button @click="download">下载表格</button>
</template>
<script setup>
import exportExcel from "./excelConfig"
const exc_data = [
['第一列', '第二列' ,'第三列'],
['aa', 'bb' ,'cc'],
['dd', 'ee' ,'ff']
];
function download() exportExcel('vue3导出的表格',this.exc_data)
</script>
三:效果同上 👆
③ react 中使用
react 导出表格 |
二:使用 👇 ( page.jsx )
import React from "react";
import exportExcel from './excelConfig'
const exc_data = [
['第一列', '第二列' ,'第三列'],
['aa', 'bb' ,'cc'],
['dd', 'ee' ,'ff']
];
function Index()
return (
<div className="box">
<button onClick=()=> exportExcel('react导出表格',exc_data) >下载</button>
</div>
);
export default Index;
三:效果同上 👆
Ⅲ. 通过 vue-json-excel ⭐⭐
/ | 使用 |
---|---|
兼容性 | 只支持vue |
使用 | 使用简单,但不灵活 |
安装
npm install vue-json-excel
使用
一:主文件 => 注册该全局组件 👇 (main.js)
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExc', JsonExcel)
二:使用该组件 👇 (page.vue)
<template>
<download-excel
class="export-excel-wrapper"
:data="excelpage"
:fields="fields"
name="filename"
type="xlsx"
>
<button> 导出excal </button>
</download-excel>
</template>
<script>
export default
data()
return
fields:
姓名: "name", //对应字段
年龄: 'age'
,
excelpage: [ name: '张三', age:18, name:'李四', age:20],
;
</script>
三:效果如下 👇
Ⅱ. 通过blob文件流导出 ⭐⭐⭐
用于后端返回blob数据
如果后端返回给前端的 blob 数据,前端转换表格导出 👇
xxxApi(params).then(res=>
if(res)
const blob = new Blob([res], type: 'application/vnd.ms-excel' )
const a = document.createElement('a')
a.download = '表格.xlsx'
a.href = window.URL.createObjectURL(blob)
a.click()
console.log('导出成功')
else
console.log('导出失败')
)
总结不易,希望uu们不要吝啬你们的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁
Angular纯前端实现table表格导出
项目中使用到,记录一下简单的demo
1、安装filesaver
npm install file-saver --save
2、导出方法
import { saveAs } from "file-saver"; //方法 exportTable() { const blob = new Blob([document.getElementById(\'exportableTable\').innerHTML], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); saveAs(blob, \'test.xls\'); }
3、html
<button mat-raised-button color="primary" (click)="exportTable()">导出</button> <div id="exportableTable" class="hidden-table"> <table> <thead> <tr> <th *ngFor="let item of tableTitle">{{item}}</th> </tr> </thead> <tbody> <tr *ngFor="let item of tableData"> <td *ngFor="let title of titleArr">{{item[title]}}</td> </tr> </tbody> </table> </div>
以上是关于纯前端导出表格的主要内容,如果未能解决你的问题,请参考以下文章