草庐IT

纯前端导出表格

野生切图仔 2024-04-07 原文

前端 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们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁

纯前端spanclasstokenjavascript

有关纯前端导出表格的更多相关文章

  1. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  2. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  3. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  4. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  5. ruby - 如何以表格格式快速打印 Ruby 哈希值？ - 2

    有没有办法快速将表格格式的ruby​​哈希打印到文件中？如:keyAkeyBkeyC...1232343451253474456...其中散列的值是不同大小的数组。还是使用双循环是唯一的方法？谢谢 最佳答案 试试我写的这个gem(在表中打印散列、ruby对象、ActiveRecord对象):http://github.com/arches/table_print 关于ruby-如何以表格格式快速打印Ruby哈希值？，我们在StackOverflow上找到一个类似的问题：

  6. ruby-on-rails - 为什么我不能在 Rails 的表格中创建一个数组作为列？ - 2

    为什么我不能这样做:classCreateModels是否有其他方法可以使数组(“apples”)成为Fruit类实例的属性？ 最佳答案 在Rails4中并使用PostgreSQL，您实际上可以在数据库中使用数组类型:迁移:classCreateSomething 关于ruby-on-rails-为什么我不能在Rails的表格中创建一个数组作为列？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/qu

  7. ruby - 如何使用远程 API 将 Confluence "Space"导出为 PDF - 2

    如何将Confluence的“空间”导出为pdf文件？看起来Confluence5.0可能仍然支持使用XML-RPCAPI。不过，我找不到调用什么的示例。https://developer.atlassian.com/display/CONFDEV/Remote+API+Specification+for+PDF+Export#RemoteAPISpecificationforPDFExport-XML-RPCInformation该链接表示调用应以pdfexport为前缀，但没有列出任何调用或给出示例。 最佳答案 这可以使用Bob

  8. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  9. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  10. ruby-on-rails - Rails - 如何选择表格中的最后一个日期？ - 2

    如何在列名为Lars的表中选择最后一个日期。我试过这个::dato,AND:name=>:name",:date=>Date.last,:name=>"Lars")%>我试过这个:输出:[#]我只需要一个日期时间格式，例如:2011-02-1523:53:28我该怎么做？ 最佳答案 您必须按日期排序并选择一条记录:您也可以通过限制为单个记录来实现此目的:Reklamer.where(name:'Lars').order('datoDESC').limit(1)如果您只想要最后一个条目的最后日期，您可以这样做:Reklamer.whe

随机推荐