【excel保存怎么覆盖】实施Node.js Vue Excel导出和保存

来源：

我们的项目是前端用的vue，服务器端用的Node.js。这个excel导出我们已经用了一年了，我们现在使用的是导出图片、导出文本、调整excel单元格距离等。

这个node端打包经过同事不断的review(同事感谢)，不断修改优化的代码，当时我也是第一次接触Node.js，只想告诉你，用它，稳定！

Node.js服务器端代码

1.获得需要导出的数据后如何使用(假数据模拟，下一页)

Constructor(prop) {

超级(prop)

//excel标头资料定义

=[

{头： '游戏'，键：' gameinfo '，width : 30}

{头： '宣传照片'，键：' image '，width : 15}

{头： '游戏详细信息页'，键：' path '，width : 15}

{header: '状态'、key :' activestatus '、width : 30}、

{头： '对齐权重'，键：' sort '，width : 30}，

{header: '最近编辑时间'，key : '更新时间'，width : 30}，

{头： '最近编辑'，键：' Operator name '，width : 30}

]。

}

/* *

*导出游戏管理数据

*/

async exportgameendgamemanage(){

Const {list}=await (true)

Con(列表，“列表”)

Const baseExcelInfo={

Data :列表，

Filename: 'gameManageList '、

Header:

床单名：《游戏管理清单》，

ImageKeys: [

{

Name: 'image '，

ImgWidth: '100 '，

ImgHeight: '100 '，

}，

]，

}

Await (baseExcelInfo)

}

复制代码

List是获得的数据。打印如下：

BaseExcelInfo用于定义默认参数

数据表示excel的数据源

Filename是文件名。但是，前端的excel导出将被复盖

Header表示表的头部

SheetName表示excel中的表名

ImageKeys:图片中的信息：字段名称、图片宽度，但只要有图片，就必须设置name

重要的一点是，假设表中数据返回的status为1，则不能导出的1必须是相应的中文，因此必须在导出之前处理。这个处理应该在服务器端做一次，而不是前端。然后，为了导出此功能，我再举一个例子。大卫亚设(David Assell)，你知道吗？(Northern Exposure)。

/* *

*公共游戏管理数据

* @param {Boolean} isExport是否导出

*/

async commongameendgamemanage(is export){

Const activeStatus={//这按理说写在constructor内

1:“打开”，

2:“关”，

}

Const {ctx，app}=this

Const {limit，offset}=)

Const isPagi=isExport？{} : {limit，offset

} const { list, total } = await c. getGameEndGameManage({ isPagi }) const data = li(node => { const { status, ...params } = node.toJSON() const activeStatus = activeStatus[status] return { activeStatus, status, ...params } }) return { list: data, total } } 复制代码

2.exportExcel的封装

首先安装对应的包 npm install exceljs --save
然后复制下面的代码就好了

'use strict' const Service = require('egg').Service // 引入exceljs const Excel = require('exceljs') // 导出文件相关服务 class exportFileService extends Service { constructor(prop) { super(prop) = [ { x: 0, y: 0, width: 10000, height: 20000, firstSheet: 0, activeTab: 1, visibility: 'visible', }, ] = 'Arial Unicode MS' = { name: , family: 4, size: 13 } = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF8DB4E2' } } = { style: 'thin', color: { argb: 'cccccc' } } } /** * 导出excel * @param { Object } config 传入的excel对象 * @param { Array } con excel的数据 * @param { String } con excel文件名 * @param { Array } con excel的头部 * @param { String } con 表名 * @param { Array } config.imageKeys 需要转化图片的key * @param { String } con 创建表的人 * @param { String } con 最后修改表的人 * @param { String } config.imageKeys.imgWidth 图片的宽度 * @param { String } config.imageKeys.imgHeight 图片的高度 * */ async exportExcel({ data = [], filename = 'file', header, sheetName = 'sheet1', imageKeys = [], creator = 'me', lastModifiedBy = 'her', }) { const { ctx } = this const workbook = new Excel.Workbook() // 设置属性 -创建着以及最后修改的人 workbook.creator = creator workbook.lastModifiedBy = lastModifiedBy // 时间获取一次就好 const now = new Date() workbook.created = now workbook.modified = now workbook.lastPrinted = now const worksheet = workbook.addWorksheet(sheetName) // 设置打开时候的视图-设置位置 workbook.views = // 使工作表可见 work = 'visible' work = header for (let i = 1; i <= ; i++) { work(i).alignment = { vertical: 'middle', horizontal: 'center' } work(i).font = { name: 'Arial Unicode MS' } } work(data) // 处理图片 const imageList = (imageKeys, data, header) // 添加图片到sheet await (imageList, imageKeys, workbook, worksheet) // 多级表头 const headerOPtion = ((item, index) => { if && i === 'multi') { (index, 1) return item } return i && i === 'multi' }) // 多级表头重置设置表头 if ) { headerOPtion[0].((text, index) => { const borderAttr = { top: , left: , bottom: , right: , index } const headerAttr = [ { attr: 'values', value: text, }, { attr: 'font', value: , }, { attr: 'fill', value: , }, { attr: 'border', value: borderAttr, }, ] (item => { work(index + 1)[i] = i return worksheet }) }) headerOPtion[0].mergeO(merge => { work(merge) }) } else { // 设置表头样式 work(1).font = work(1).fill = } const bufferContent = await workbook.xl() // 设置 c('Content-disposition', `attachment;filename=${filename}.xlsx`) // 返回文件buffer c = bufferContent } // 设置图片大小 getImageList(imageKeys, data, header) { return imageKeys.map( key => da( (item, index) => ({ key, url: item[key.name], col: (header, key.name) + 1, row: index + 2, width: key.imgWidth, height: key.imgHeight, }) ) ) } // 添加图片到sheet async addPicToSheet(imageList, imageKeys, workbook, worksheet) { if (imageKeys.length > 0) { await Promi(imageLi(async imgArr => { return await Promi(item => { const { url, width, height, row, col } = item // 因为有的图片是不存在的需要判断 if (url) { return (url, ).then(res => { if (!url) return const imgType = url.split('?')[0].substring('?')[0]. lastIndexOf('.') + 1).toLowerCase() const id = workbook.addImage({ base64: res, extension: imgType, }) work(id, { tl: { col: col - 1, row: row - 1 }, ext: { width, height }, }) work(row).height = height // // 去掉背景链接 work(row).getCell).value = '' }) } return item })) })) } } } module.exports = exportFileService 复制代码

3.调用下载接口后node.js返回的信息

前端看到的就是一个二进制文件流

image.png

image.png

推荐了解 content-type: application/octet-stream

前端代码

接口

// 文件导出 export function exportFile(url, params) { return request({ responseType: 'blob', headers: { 'Content-Type': 'application/json', }, timeout: 1000 * 60, url: url, method: 'get', params: { query: qs.stringify(params), }, }) } 复制代码

utils

/** * 本地保存文件并导出 * @param { Object } Obj 导出文件参数对象 * @param { Blob } file 文件资源 * @param { String } fileName 文件名称(注意：包含后缀) */ export function loacalSaveFile({ file, fileName, option = { type: 'application; }}) { const ieKit = judgeBrowser('ie') const blobData = new Blob([file], option) // 生成 Blob文件 if (ieKit && naviga) { naviga && naviga(blobData, fileName) } else { // 其他 const save_link = document.createElement('a') const url = URL.createObjectURL(file) // 创建url = url = fileName document.body.appendChild(save_link) () setTimeout(() => { document.body.removeChild(save_link) window.URL.revokeObjectURL(url) // 回收url }, 0) } } 复制代码

调用

const file = await exportFile, data) loacalSaveFile({ file, fileName: `${}.xlsx` }) 复制代码

效果

我是@半糖学前端，专注前端领域技术分享，我先坚持10年，大家一起来做个见证吧！