700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 简单易上手|纯前端导出excel + 常用样式的修改(vue + xlsx + xlsx-style)

简单易上手|纯前端导出excel + 常用样式的修改(vue + xlsx + xlsx-style)

时间:2019-06-11 17:42:44

相关推荐

简单易上手|纯前端导出excel + 常用样式的修改(vue + xlsx + xlsx-style)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

前言一、安装依赖报错解决方案 二、使用步骤1.导出与保存函数说明2.读入数据3.toExcel传参说明

前言

在工作中难免遇到导出EXCLE表格的需求,本文仅为小白提供快速入门,如需深入请移步官网

一、安装依赖

文件保存

npm install file-saver --save

Excel导出

npm install xlsx --save

Excel样式修改-如果不需要修改样式,则无需导入

npm install xlsx-style --save

引入xlsx-style后,会有This relative module was not found:./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js报错

报错解决方案

找到在\node_modules\xlsx-style\dist\cpexcel.js 807行的var cpt = require('./cpt' + 'able');更换成var cpt = cptable;保存继续。vue.config.js 中的configureWebpack添加

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

二、使用步骤

1.导出与保存函数说明

创建toExcel.js文件

代码如下:

import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')import sslssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下(示例):

import XLSX from 'xlsx'// 样式按需引入import XLSXD from 'xlsx-style'// 保存文件import {saveAs } from 'file-saver'// excel数据处理export function toExcel(data) {// 生成数据表对象let wb = XLSX.utils.book_new()// 获取sheet页名称let sheets = Object.keys(data)sheets.forEach(sheet => {if (data[sheet].data && data[sheet].data.length > 0) {// 生成Sheet页wb.SheetNames.push(sheet)// 倒入数据wb.Sheets[sheet] = XLSX.utils.aoa_to_sheet(data[sheet].data)// 如果存在合并信息则存储合并单元格if(data[sheet].merges) {wb.Sheets[sheet]['!merges'] = data[sheet].merges}// 如果存在列宽信息,则调整列宽if(data[sheet].cols) {wb.Sheets[sheet]['!cols'] = data[sheet].cols}}})// 如果不需要引入样式,则使用 // let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary'})let wbout = XLSXD.write(wb, {bookType: 'xlsx', type: 'binary', bookSST: true, cellStyles: true})return wbout}//输出Excelexport function outputExcel(s) {let buf = new ArrayBuffer(s.length) //convert s to arrayBufferlet view = new Uint8Array(buf) //create uint8array as viewerfor (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF //convert to octetreturn buf}// 传入xlsx对象和文件名称,导出文件export function downLoadXlsx(wbout, fileName) {saveAs(new Blob([outputExcel(wbout)], {type: 'application/octet-stream' }), fileName+'.xlsx')}

3.toExcel传参说明

let data = {// 'xxx'为sheet页名称,需要多少sheet页就写多少个对象'xxx': {// 数据列表data: [// 每一个数组是一行数据[],[],// ...,[{v: '数据值 例如:表头1、123',t: '内行: b: Boolean, e: Error n: Number d: Date S text z: Stub', // 非强制s: '单元格样式' // 非强制// ...其余的不讲了},]],// 合并单元格merges: [{// 开始位置 c: col, r: rows: {c: 0, r: 0 },// 结束为止e: {c: 0, r: 0 }}],// 列宽调整cols: [{wch: 20}]}}

例子:

let data = {// 'xxx'为sheet页名称,需要多少sheet页就写多少个对象'测试sheet1': {// 数据列表data: [// 每一个数组是一行数据[‘这里是表头’, '', '', ''],['第一列', '第二列', '第三例', '第四列'],[{v: '张三',s: {// 背景色fill: {fgColor: {rgb: 'FFFF00' }},// 边框border: {top: {style: 'thin', },left: {style: 'thin', },right: {style: 'thin', },bottom: {style: 'thin', }},// 居中alignment: {horizontal: 'center',vertical: 'center',wrapText: true,},// 字体font: {bold: true,}}},]],// 合并单元格merges: [{// 开始位置 c: col, r: rows: {c: 0, r: 0 },// 结束为止e: {c: 0, r: 4 }}],// 列宽调整cols: [{wch: 20}]}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。