vue中导出excel

运用SheetJS库实现Excel的导入导出 SheetJS 库实现Excel导入导出 阅读详情

后端返回的是blob数据

//导出Excel
          //请求
			export function excelcash(data) {
			  return request({
			    url: '地址',
			    method: '请求',
			    data: 数据,
			    responseType: 'blob'
			  })
			}
          //方法
            handleExportExcel(){
                //console.log("导出数据");
                //list是导出表格的数据
                excelcash({list:this.tableData}).then(res=>{
                    console.log(res.data,'pp')
                    const blob = res.data
                    const link = document.createElement('a')
                    link.href = URL.createObjectURL(blob)
                    link.download = "excel.xls"
                    document.body.appendChild(link)
                    link.click()
                    window.setTimeout(function() {
                    URL.revokeObjectURL(blob)
                    document.body.removeChild(link)
                    }, 0)
                })
                }

如果后端返回base64,需要先转换成blob
下一个base64依赖

import {Base64} from 'js-base64'
const base = (base64data = '', fileName = '', contentType = '', sliceSize = 512) => {
  let byteCharacters = Base64.atob(base64data)
  let byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    let slice = byteCharacters.slice(offset, offset + sliceSize);
    let byteNumbers = [];
    for (let i = 0; i < slice.length; i++) {
      byteNumbers.push(slice.charCodeAt(i));
    }
    // 8 位无符号整数值的类型化数组。内容将初始化为 0。
    // 如果无法分配请求数目的字节,则将引发异常。
    byteArrays.push(new Uint8Array(byteNumbers));
  }
  let result = new Blob(byteArrays, {
    type: contentType
  })
  result = Object.assign(result,{
    // 这里一定要处理一下 URL.createObjectURL
    preview: URL.createObjectURL(result),
    name: fileName
  });
  console.log(result)
  const link = document.createElement('a')
  const body = document.querySelector('body')
  link.href = URL.createObjectURL(result)
  link.download = 'xxx.xls'

  // fix Firefox
  link.style.display = 'none'
  body.appendChild(link)

  link.click()
  body.removeChild(link)

} 
export default base

14自由度汽车动力学模型 多体系统分解簧上质量刚体:包含车身主体,具有6个自由度(x/y/z平移 + 俯仰/侧倾/横摆旋转)四个簧下质量刚体:每个车轮独立建模,含垂直跳动(z向)和旋转(绕z轴)自由度总自由度:6(车身) + 4×2(车轮) = 14自由度。 阅读详情

相关推荐

避开ns-3学习深坑:用sns3模块快速搭建GEO卫星通信仿真(附GitHub代码解读)

本文介绍了如何使用sns3模块快速搭建GEO卫星通信仿真环境,绕过复杂的ns-3底层细节。通过详细的Linux环境配置、sns3模块安装和示例代码解读,帮助开发者快速上手卫星通信仿真,并提供了常见问题的解决方案和性能优化技巧。

weixin_28720573的博客 438

vue导出excel表 导入excel表

导入导出

weixin_45958029的博客 534

深入解析Vortex GPGPU cache设计(2),关于cache_bank

本文分析了Vortex处理器的cache_bank模块设计,作为cache系列的第二部分。文章详细阐述了cache_bank的基本结构,包括地址位分配和默认配置参数。重点解析了cache的5种操作及其优先级。文章详细介绍了二级流水线设计,包括TAG/DATARAM的读写操作时序。

weixin_55313207的博客 1168

swagger测试导出报URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.

swagger测试导出报URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.

newstudent_的博客 1926

MyEclipse 2017 CI 10安装与激活

本文介绍MyEclipse 2017 CI 7、CI 8、CI 9和CI 10的安装与激活。此方法理论上应该能激活MyEclipse 2017 CI所有系列,即激活方法是通用的,只是激活文件略有不同。本文提供MyEclipse 2017 CI 7、CI 8、CI 9和CI 10的激活文件。说明:博主所提供的压缩包格式均为RAR5,即WinRAR 5.0以上的版本才能正常解压,别的压缩软件博主不太清...

weixin_42539046的博客 9416

从零开始:手把手教你设计人形机器人锂电池供电系统

人形机器人要像人类一样“活起来”,必须有稳定的“能量血液”——供电系统。本文聚焦锂电池供电系统如何根据机器人功耗选择合适的锂电池参数(容量、电压、放电倍率);如何设计电池管理系统(BMS)保护电池安全;如何解决机器人运动时的“瞬时大电流”供电难题;如何通过硬件电路和代码实现供电系统的监测与控制。用“机器人小助手的能量危机”故事引入锂电池供电系统;拆解锂电池核心参数(容量、电压、放电倍率)和供电系统三大组件(电池组、BMS、电源转换模块);

AI天才研究院 1758

js导出excel表格

1. 在html页面先写一个a标签 导出excel2.再写js: function toExcel(){ // 使用outerHTML属性获取整个table元素的HTML代码(包括标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码 var html = "" + document.getElementById("exampleTable").

JiayanFighting的博客 572

微信小程序 - {“errMsg”:”requestPayment:fail banned”} 微信小程序调用wx.requestPayment支付失败返回错误(uniapp微信小程序微信支付报错)

{“errMsg”:”requestPayment:fail banned”},微信小程序调用wx.requestPayment报错requestPayment:fail banned,uni-app微信小程序wx.requestPayment支付报错requestPayment:fail banned,拉起小程序支付报错,iPhone苹果ios真机微信支付报错,Android安卓手机微信支付报错,支付报错,商户配置,签名验证,uniapp 小程序支付微信支付一场,设置过b2b类目,确认了商户号相关功能正常

🏆 前端领域优质创作者 3342

vue项目导出Excel表格

点击导出按钮,对后台发起请求,会返回一个二进制的数据,创建一个Blob对象用来装这个数据。 let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //res.data是后台传回来的二进制数据 然后通过 Blob URL 方式:URL.createObjectURL(blob) 生成一个下载地址(...

weixin_42704663的博客 313

【华为OD机试真题】45、 分糖果 | 机试真题+思路参考+代码解析(C++、Java、Py、JS)

### 🎃题目描述 >小明从糖果盒中随意抓一把糖果,每次小明会取出一半的糖果分给同学们。 >  当糖果不能平均分配时,小明可以选择从糖果盒中(假设盒中糖果足够)取出一个糖果或放回一个糖果。 >  小明最少需要多少次(取出、放回和平均分配均记一次),能将手中糖果分至只剩一颗。

正在更新最新华为OD机试2025B卷,提供OJ在线刷题 1290

基于Simulink的双向DC-DC变换器在储能系统中的应用仿真

摘要:本文详细介绍了基于Simulink的双向DC-DC变换器在光伏储能系统中的仿真实现。主要内容包括:1)采用非隔离型双向Buck-Boost拓扑作为储能系统枢纽;2)针对750V直流微网中的20kWh锂电池接口场景进行建模;3)详细阐述双闭环控制器设计(电压外环+电流内环)、工作模式判断逻辑等关键步骤;4)通过仿真验证了系统在功率阶跃和模式切换下的性能。文章提供了完整的建模流程和控制方法,为储能系统接口设计提供了实用参考。

amy_mhd的博客 178

Vue2中导出Excel

目录 方式一:vue-json-excel 1、引入vue-json-excel 2、 main.js中全局注册 3、使用 4、效果图 ​​ 方式二:file-saver、xlsx、script-loader 1、引入依赖 2、下载并引入Blob.js和Export2Excel.js 3、使用 4、效果图 方式一:vue-json-excel 这种方式会导出xls后缀的格式 1、引入vue-json-excel cnpm i -S vue-json-excel 2、 ...

2万+

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

vueJs导出excel文件

一、安装依赖 cnpm install --save xlsx file-saver 二、导入依赖包 import FileSaver from 'file-saver'; import XLSX from 'xlsx'; 三、添加导出按钮 <el-form-item> <el-button @click="exportExcel" style="margi...

希尔伯特的博客 1086

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

vue-cli3导出表格excel,Export2Excel导出表格,导出多sheet excel,vue导出多页表格

目录 (一)直接调用 (二)、封装导出函数调用 最近做项目中有一个导出excel表格的需求 具体思路是:后端返回给我json数据,前端根据数据和具体的几项字段去导出excel表格,还有导出多个sheet,多页表格到一个excel表里面,具体思路 根据Export2Excel插件,并修改插件Export2Excel完成导出多页(多个sheet)的excel 第一步:安装插件 依赖 ...

csl125的博客 1万+

VUE中导出Excel功能的实现

vue导出excel操作(wxport2excel.js)

a736755244的博客 5641

vue导出excel表格(详细教程)

在开发的时候,会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下 一、安装vue-json-excel npm install vue-json-excel -S 二、main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel) 三、在代码中使用 <template>

m0_59023970的博客 5万+

Vue中如何进行数据导出与Excel导出?

本文介绍了Vue中两种常用的数据导出和Excel导出方式。第一种方式是使用第三方库xlsx,它是一个纯JavaScript的库,可以在浏览器中直接使用,不需要安装任何插件。第二种方式是使用后端API,借助后端API生成Excel文件,并将文件以二进制形式返回给前端。两种方式各有优缺点,具体使用时需要根据具体情况选择。同时,在实际使用过程中,我们还需要注意一些细节问题,比如Excel文件的格式、数据的安全性等。最后,如果您需要在Vue中进行数据导出和Excel导出,希望本文能对您有所帮助。

程序猿徐师兄的博客 1万+

VUE中使用vue-json-excel超级方便导出excel表格数据

在项目开发时免不了有时会用到表格数据导出excel的功能,以前会用file-saver xlsx script-loader来导出,而且配置非常麻烦,现在用vue-json-excel配置及使用都非常简单 一、安装vue-json-excel npm install vue-json-excel -S 二、main.js里面引入并注册使用 import JsonExcel from 'vue...

junkaicool的博客 1万+

Vue中如何实现Excel导入导出

在vue-element-admin中,大佬已经封装好了Excel的导入导出方案,我们需要引入借鉴,拷贝 vue-element-admin 中提供的 excel 导入功能组件到自己项目中。因为接口中返回的数据中的key是英文,而我们期望导出的表头是中文,所以提前准备中文和英文的映射关系。按照接口的要求,把 excel 表格中经过插件处理好的数据处理成后端接口要求的格式。数据格式转换:将 excel 解析好的数据经过处理后,转成可以传给接口调用的数据。按接口要求,处理excel导入的数据。

m0_73975292的博客 6667

基于vue 实现 excel导出导入功能

这波你必须要学会的基于vue的表格的导入和导出功能,可以不用,但是不能不会

LOxia的博客 1万+

在Vue3中实现前端导出Excel功能

本文主要介绍在Vue3中实现前端导出Excel功能。

一起学习 6058

【vue】导出excel

上面可以自定义自己的样式,还可以引用其他组件button。后端导出excel:就用 vue+POI(maven 包)前端导出excel:就用 vue+XLSX(npm 包)3.js方法:导出全部exportAllExcel。main.js中引入。

qq_45142349的博客 922

vue 导出Excel

导出为Excel的功能,记录两个方法:1.vue中Table组件中自带exportCsv方法,可以实现导出功能,并且可以实现自定义导出列方法名说明参数exportCsv将数据导出为 .csv 文件,说明:支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。IE9、Safari 需要手动修改后缀名为 .csv。IE9暂时只支持英文,中文会显示为乱码。params...

焦玉丽 5293

vue 实现Excel 导出

数据表格的导出,是实际开发的常见功能,前后端都可以实现表格导出,讲解自己在用的一种。获取数据源,可以通过后端接口实现,也可以利用分页查询的表格接口来实现。处理数据,对excel表格的表头(最上面一行)表格数据是一个二维数组对应起来的,表格文件名字。利用第三方包构建Excel,vue-element-admin 是提供了文档的,可以根据实际情况更改。

路虽远行则将至,事虽难做则必成。 3257

在vue中使用vue-json-excel,导出excel表格数据

在vue中使用vue-json-excel,导出excel表格数据 表格 安装插件 npm:npm install vue-json-excel -S yarn:yarn add vue-json-excel -S 在main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel) 在组件中使用 <download-excel class = "export-excel

z18511120547的博客 2138

在vue.js中如何导出Excel表格

有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1. 安装依赖 //npm npm install -S file-saver xlsx npm install -D script-loader 或者 //yarn yarn add file-saver yarn add xlsx yarn add script-loa...

dt1991524的博客 2387
上一篇: vue中 this.$set的用法
下一篇: commonjs规范
前端小li
博客等级 码龄7年 14粉丝 50原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值