纯前端导出表格

Posted 野生切图仔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯前端导出表格相关的知识,希望对你有一定的参考价值。

前端 excel 表格导出

我们习惯了后端去处理表格,直接接口返回 ,那前端如何轻松的导出表格呢?

文章目录

Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐

/使用
兼容性支持 vue、react 、angular
几乎兼容所有浏览器 (IE 8版本以上)
使用非常灵活
安装
npm install --save xlsx
① vue2 中使用
vue2 导出表格
一 :导出的 js 配置文件 👇 (excelConfig.js)
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 导出表格
一 :导出的 js 配置文件 👇 (excelConfig.js) 相比 vue2 导入的方式不同
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 导出表格
一 :导出的 js 配置文件 👆 (excelConfig.js) >与 vue2 的写法完全相同

二:使用 👇 ( 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>

 



以上是关于纯前端导出表格的主要内容,如果未能解决你的问题,请参考以下文章

Angular纯前端实现table表格导出

SpreadJS 表格控件发布V11版本,新增图表及前端PDF导出!

js 实现纯前端将数据导出excel两种方式,亲测有效

前端导出数据到excl表格

js 实现纯前端将数据导出excel两种方式,亲测有效

SpreadJS 纯前端表格控件V11.1震撼来袭