上海 网站建设 排名,网站开发包括几部分,图片制作视频的软件,做网站如何用代码把字体变大xlsx
xlsx是由SheetJS开发的一个处理excel文件的npm库
适用于前端开发者实现导入导出excel文件的经典需求
为了区别于xlsx文件#xff0c;突出其应用语言#xff0c;该库通常又被称为js-xlsx
导出js数据为Excel文件
需要以下步骤#xff1a;
安装 xlsx 库 你可以使用 …xlsx
xlsx是由SheetJS开发的一个处理excel文件的npm库
适用于前端开发者实现导入导出excel文件的经典需求
为了区别于xlsx文件突出其应用语言该库通常又被称为js-xlsx
导出js数据为Excel文件
需要以下步骤
安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库也可以将 xlsx 下载到本地然后在 HTML 文件中通过 script 标签引入。准备数据 将需要导出的数据准备好并将其存储为一个数组或对象。创建工作簿 通过 xlsx 库的 utils.book_new() 方法创建一个工作簿workbook对象该对象包含一个或多个工作表worksheet。创建工作表 通过 xlsx 库的 utils.json_to_sheet() 方法创建一个工作表并将准备好的数据作为参数传入该方法。如果需要创建多个工作表可以多次调用该方法并将它们添加到工作簿对象中。将工作表添加到工作簿 通过 xlsx 库的 utils.book_append_sheet() 方法将创建好的工作表添加到工作簿对象中。导出数据 通过 xlsx 库的 writeFile() 方法将工作簿对象导出为 Excel 文件。你可以指定导出的文件名和文件格式比如 .xlsx 或 .csv。
以下是一个使用 xlsx 库将数据导出为 Excel 文件的示例代码
vue
script setup
import * as XLSX from xlsx/xlsx.mjs;
const download () {const data [[姓名, 年龄, 性别],[张三, 18, 男],[李四, 22, 女],[王五, 25, 男],];const workbook XLSX.utils.book_new();const worksheet XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(workbook, worksheet, Sheet1);XLSX.writeFile(workbook, data.xlsx);
};
/scripttemplatebutton clickdownload导出/button
/template导入Excel文件生成js数据
使用input typefile选择xlsx文件使用fileReader读取文件为二进制编码XLSX.read方法处理二进制编码为worksheet对象XLSX.utils.sheet_to_json转换worksheet对象为json数据实际上就是js数组最后处理数组数据为自己想要的格式即可
templatearticlep导入高德地图xlsx文件/pinput typefile refupload accept.xls,.xlsx //article
/templatescript
import XLSX from xlsx
export default {mounted() {// 监听表格导入事件this.$refs.upload.addEventListener(change, e {this.readExcel(e)})},methods: {readExcel(e) {//表格导入const files e.target.files//如果没有文件名不往下执行if (files.length 0) return// 上传文件格式不正确,非xls或者xlsx格式文件不往下执行if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) returnconst fileReader new FileReader()// readAsBinaryString将文件读取为二进制编码fileReader.readAsBinaryString(files[0])// 读取完成fileReader.onload ev {try {// 二进制数据const data ev.target.result// xlsx处理二进制数据const workbook XLSX.read(data, {type: binary})//取第一张表const wsname workbook.SheetNames[0] // 根据表格内容生成json数据const ws XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) const outputs [] //清空接收数据for (let i 0; i ws.length; i) {const sheetData {value: ws[i].adcode,label: ws[i].中文名}outputs.push(sheetData)}} catch (e) {console.log(e)}}}}
}
/scriptxlsx-js-style库使用
xlsx基础库不提供样式设置可以使用xlsx-js-style库这个库是xlsx库的fork版本并添加了样式定义
详细样式可以查看https://github.com/gitbrent/xlsx-js-style/
可以调节背景色、字体样式、border
npm i -s xlsx-js-stylescript setup
import XLSX from xlsx-js-style;
console.log();
const download () {const wb XLSX.utils.book_new();const ws XLSX.utils.aoa_to_sheet([[Hello, World],[1, 2],]);// 在单元格对象中添加 s 属性来设置该单元格的样式ws[A1].s {font: { bold: true },alignment: { horizontal: center },fill: { fgColor: { rgb: FFFF0000 } },};ws[B2].s {alignment: { horizontal: center },font: { bold: true },fill: { fgColor: { rgb: FFFF0000 } },};XLSX.utils.book_append_sheet(wb, ws, Sheet1);XLSX.writeFile(wb, example.xlsx);
};
/script去掉标题头
XLSX.utils.json_to_sheet默认使用Object.keys生成头部
所以如下数据格式不加上skipHeader: true,会出现0 1 2的索引头部
script setup
import XLSX from xlsx-js-style;
const download () {const data [[姓名, 年龄, 性别],[张三, 18, 男],[李四, 22, 女],[王五, 25, 男],];const wb XLSX.utils.book_new();const ws XLSX.utils.json_to_sheet(data, {skipHeader: true,});XLSX.utils.book_append_sheet(wb, ws, Sheet1);XLSX.writeFile(wb, example.xlsx);
};
/scripttemplatebutton clickdownload导出/button
/template设置列宽
script setup
import XLSX from xlsx-js-style;
const download () {const data [{ 姓名: 张三, 年龄: 18, 性别: 男 },{ 姓名: 李四, 年龄: 20, 性别: 女 },{ 姓名: 王五, 年龄: 22, 性别: 男 },];const wb XLSX.utils.book_new();const ws XLSX.utils.json_to_sheet(data);ws[!cols] [{wpx: 150,},{wpx: 500,},{wpx: 100,},];XLSX.utils.book_append_sheet(wb, ws, Sheet1);XLSX.writeFile(wb, example.xlsx);
};
/scripttemplatebutton clickdownload导出/button
/template合并单元格
script setup
import XLSX from xlsx-js-style;
const download () {const data [{ 姓名: 张三, 年龄: 18, 性别: 男 },{ 姓名: 李四, 年龄: 20, 性别: 女 },{ 姓名: 王五, 年龄: 22, 性别: 男 },];const wb XLSX.utils.book_new();const ws XLSX.utils.json_to_sheet(data);// s 表示要合并的单元格范围的左上角单元格r 表示该单元格的行号c 表示该单元格的列号行列号从 0 开始计数。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的单元格即 A1 单元格。// e 表示要合并的单元格范围的右下角单元格其含义与 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的单元格即 B1 单元格。// 因此{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之间的元格。// 注意合并会以开始位置单元格中的内容为准所以合并后的单元格中的内容为 A1 单元格中的内容。ws[!merges] [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];XLSX.utils.book_append_sheet(wb, ws, Sheet1);XLSX.writeFile(wb, example.xlsx);
};
/scripttemplatebutton clickdownload导出/button
/template
