Vue使用xlsx和xlsx

您所在的位置：网站首页 › 样式不生效 › Vue使用xlsx和xlsx

Vue使用xlsx和xlsx

2023-09-30 13:17| 来源: 网络整理| 查看: 265

使用Vue + xlsx + xlsx-style 纯前端导出Excel文件

过程中可能遇到的坑已全部列出

首先安装所需的三个依赖：

npm install xlsx --save npm install xlsx-style --save npm install file-saver --save

如果需求仅仅是导出普通excel，则安装xlsx 即可，仅可以对列宽等进行简单控制。

如果需要控制excel的样式（颜色、字体、边框、居中等），则还需要安装xlsx-style和file-saver。

xlsx-style顾名思义用来设置excel样式，file-saver用来下载文件（普通excel直接用xlsx就可以下载，使用xlsx-style后必须用file-saver才可以下载）

安装xlsx-style的坑：

用npm install xlsx-style --save命令可能会安装失败，所以推荐使用cnpm install xlsx-style --save命令进行安装，安装好后不出意外程序会报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx，解决方法网上搜索即可，如在vue.config.js中添加

configureWebpack: { externals:{ './cptable': 'var cptable' }, }

注意添加完需要重启项目

准备工作做完就到代码实战了：

import XLSX from 'xlsx' import XLSXS from 'xlsx-style' import FileSaver from 'file-saver' function exportExcel() { // 需要导出的数据 let excelData = [ ['幼儿园课表', null, null, null], // 标题 ['序号', '课程名称', '教师名称', '上课地点'], // 表头 ['1', '体育', '大头老师', '操场'] ] // 导出的excel文件名 const filename = '幼儿园课程表.xlsx' // Excel第一个sheet的名称 const ws_name = 'Sheet1' const wb = XLSX.utils.book_new() const ws = XLSX.utils.aoa_to_sheet(excelData) XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄 // 设置标题行单元格合并 // s即start, e即end, r即row, c即column // 合并从--0行0列开始,到0行3列 ws['!merges'] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } } ] // 设置单元格宽度 ws['!cols'] = [{ wpx: 40 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }] /* 设置单元格其他样式这里列举一部分,其他样式大同小异,自行网上搜索 */ // 可以遍历全部单元格,进行样式设置 for (let i in ws) { if (i === 'B1') { ws[i].s = { // 字体 font: { name: '仿宋', sz: 14, bold: true } } } else if (i === 'B2') { ws[i].s = { // 居中 alignment: { horizontal: 'center', vertical: 'center', wrapText: true } } } else if (i === 'B3') { ws[i].s = { // 单元格边框 border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } } } // 导出Excel, 注意这里用到的是XLSXS对象 let wbout = XLSXS.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' }) FileSaver.saveAs( new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), filename ) } /** * 工具方法 */ function s2ab(s) { var buf = new ArrayBuffer(s.length) var view = new Uint8Array(buf) for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff return buf }

【本文地址】

Vue使用xlsx和xlsx

Vue使用xlsx和xlsx

今日新闻

推荐新闻