前端如何下载excel表格

1.1下载表单，需要自己配置，引用别人封装好的ts文件

import { downloadXlsxFile } from "./downloadFile"; //引入自定义xlxs tsconst form = reactive({val:{}})
form.val=res.data.trsCircuit;const labelAll = {aaddress:'地址',abuzPort: "设备端口",actnId: "系统ID",acustId:'A用户信息'}//下载电路基本信息自定义xlxs
const downloadBasic = () => {var data = [form.val];var fields = labelAll;let filename = "电路基本信息";//data表格信息 fields表头 filename文件名downloadXlsxFile(data, fields, filename);
};

downloadFile.ts//装 file-saver 和 xlsx 包
import fs  from 'file-saver'
import  * as XLSX from 'xlsx'
function downloadXlsxFile(dataArray: any, fields: any, filename: string) {/*** 表格数据 => dataArray=[{id:"1",name:"666",sex:"男"}] * 表格数据的title => fields={id:"id",name:"名字",sex:"性别"}* 表格名字 => filename*/var data = JSON.stringify(dataArray);var newData = JSON.parse(data);newData.forEach((item: any) => {if (item) {for (let i in item) {if (fields.hasOwnProperty(i)) {item[fields[i]] = item[i];}delete item[i]; //删除原先的对象属性}}})let sheetName = filename //excel的文件名称let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。let ws = XLSX.utils.json_to_sheet(newData, { header: Object.values(fields) }) //将JS对象数组转换为工作表。wb.SheetNames.push(sheetName)wb.Sheets[sheetName] = wsconst defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //写入的样式let wbout = XLSX.write(wb, wopts)let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })fs.saveAs(blob, filename + '.xlsx')
}
function  s2ab(s) {if (typeof ArrayBuffer !== 'undefined') {var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xffreturn buf} else {var buf = new Array(s.length);for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;return buf;}
}
export { downloadXlsxFile };

1.2自己封装下载方法

//装 xlsx 包
import * as XLSX from 'xlsx'
const exportExcelfn=(successData,filename,fileName)=>{// 设置表格样式，!cols为列宽const options = {'!cols': [{ wpx: 100 },{ wpx: 100 },{ wpx: 100 },{ wpx: 100 },{ wpx: 100 },]}; const successSheet1 = XLSX.utils.json_to_sheet(successData);const successSheet2 = XLSX.utils.json_to_sheet(successData);// 设置每列的列宽，10代表10个字符，注意中文占2个字符   successSheet1 ['!cols']=successSheet2 ['!cols'] = options['!cols']; //创建虚拟工作簿workbookconst workbook = XLSX.utils.book_new();/* 将工作表添加到工作簿,生成xlsx文件(book,sheet数据,sheet命名)*/XLSX.utils.book_append_sheet(workbook, successSheet1 , filename);XLSX.utils.book_append_sheet(workbook, successSheet2 , filename);/* 输出工作表， 由文件名决定的输出格式(book,xlsx文件名称)*/XLSX.writeFile(workbook, `${fileName+filename}.xlsx`);
}

const downloadBasic = (fileName) => {console.log( form.val)let data=form.val;const successData = [{'ID':data.Id,'名称':data.Name,'别名':data.alias,}];exportExcelfn(successData,'文件名',fileName)
}

2. 下载表格

import FileSaver from "file-saver"; //下载excel
import * as XLSX from "xlsx";const exportExcel = (el) => {var xlsxParam = { raw: true };var wb = XLSX.utils.table_to_book(document.querySelector("#" + el),xlsxParam);var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"详情.xlsx");} catch (e) {if (typeof console !== "undefined") {console.log(e, wbout);}}return wbout;
};

3.后端写好的导出excel接口，前端如何发送请求

方法一：

const downloadAll = () => {window.open(//接口url`http://111.11.11.11:1111/export-data?${qs.stringify(queryData)}`,'_blank');
};

方法二

首先需要下载 js-file-download 包

npm install js-file-download

在需要使用的页面引入

import fileDownload from 'js-file-download';

封装导出请求方法，必须配置 responseType: "blob"，否则可能出现文件损坏问题

export function export(data) {return request({responseType: "blob",url: "export-data",method: "post",data: JSON.stringify(data),headers: {"Content-Type": "application/json",},});
}

调用导出接口

const res = await export(queryData);
fileDownload(res, 'xxxx.xlsx')

前端如何下载excel表格相关推荐

前端原生下载excel表格
方式一 // html 部分--------<button @click="downloadExcel()">下载excel</button>// js 代 ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
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 ...
前端自己导出excel表格不需要调接口（可导出全部的数据）
前端自己导出excel表格不需要调接口(可导出全部的数据) 1.下载 npm install -S file-saver xlsx 2.把js放在对应的位置全部复制(Export2Excel.js ...
下载excel表格后缀名为.do形式
最近用POI导出数据到excel,文件可以在浏览器下载,只是下载excel表格后缀名为.do形式.这里的do是我web.xml配置的filter过滤去的拦截方式,事实证明,这里配置什么拦截方式,后缀名 ...
点击按钮下载Excel表格
网页点击按钮,下载Excel表格到本地 // 下载Excel表格 // table:页面需要下载的表格名 elem:下载按钮 tableName:下载后的报表名 function getExcelUr ...
前端axios下载excel文件(二进制)的处理方法
前端axios下载excel文件(二进制)的处理方法后端生成excel后,前端 click 事件进行下载 ,脱坑记录,亲测有效. lz 使用的是 axios 发起请求 , 首先,介绍一下思路,准备通 ...
SpringBoot下载excel表格
SpringBoot下载excel表格 git地址:https://gitee.com/benming-walnut/download-excel.git 1.目录结构 2.相关依赖 <pare ...

前端如何下载excel表格

前端如何下载excel表格相关推荐

最新文章

热门文章