【实战】963- Node.js + Vue 实现 Excel 导出与保存

深藏阁楼爱情的钟 2023-01-23 02:54 108阅读 0赞

![e2a54938e7f811a8af7adaf44f6b9113.png][]

# 来源：猪啰啰    #

https://juejin.cn/post/6953882449235410951

我们的项目是前端用vue,服务端用node.js,这个excel导出我们已经用了一年,我们目前用到的无非是图片导出,文本导出,调调excel单元格距离等.

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

### node.js服务端代码 ###

#### 1.拿到需要导出的数据之后如何使用(假数据模拟,下面是页面) ####

![4c49a1c8801bce4f461ec15afebff2e1.png][] image.png

constructor(prop) {
        super(prop)
        // 定义excel头部数据
        this.header = [
          { header: '游戏', key: 'gameInfo', width: 30 },
          { header: '宣传图片', key: 'image', width: 15 },
          { header: '游戏详情页', key: 'path', width: 15 },
          { header: '状态', key: 'activeStatus', width: 30 },
          { header: '排序权重', key: 'sort', width: 30 },
          { header: '最近编辑时间', key: 'updateTime', width: 30 },
          { header: '最近编辑人', key: 'operatorName', width: 30 },
        ]
      }
     /**
       * 导出游戏管理数据
       */
      async exportGameEndGameManage() {
        const { list } = await this.commonGameEndGameManage(true)
        console.log(list, 'list')
        const baseExcelInfo = {
          data: list,
          filename: 'gameManageList',
          header: this.header,
          sheetName: '游戏管理列表',
          imageKeys: [
            {
              name: 'image',
              imgWidth: '100',
              imgHeight: '100',
            },
          ],
        }
        await this.service.common.exportFile.exportExcel(baseExcelInfo)
      }
    复制代码

> list就是拿到的数据,打印如下  
> baseExcelInfo用来定义基本的参数  
> data 表示的是excel的数据来源  
> filename 是文件名(但是前端的excel导出会进行覆盖)  
> header表示的是表格的头部  
> sheetName表示的是excel的表名  
> imageKeys:图片的信息:字段名称，图片的宽高,但是只要有图片,name必须设

![f17401a61fe03d8257dadc035311f445.png][] image.png

`很重要的一点就是,假设从表里面的数据返回的status是1,那么我肯定导出的不能1,应该是对应的一个中文,所以在导出前,应该进行处理,这个处理应该是在服务端来做,而不是前端做一遍,然后为了导出这个功能重新做一遍`举个例子

/**
       *  公共游戏管理数据
       *  @param { Boolean } isExport 是否导出
       */
      async commonGameEndGameManage(isExport) {
        const activeStatus = { // 这个按道理写在constructor里面哈
          1: '打开',
          2: '关闭',
        }
        const { ctx, app } = this
        const { limit, offset } = this.paginationDeal(ctx.request.query)
        const isPagi = isExport ? {} : { limit, offset }
        const { list, total } = await ctx.service.operateManage.gameEndPage.
        getGameEndGameManage({ isPagi })
        const data = list.map(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)
        this.defaultViews = [
          {
            x: 0,
            y: 0,
            width: 10000,
            height: 20000,
            firstSheet: 0,
            activeTab: 1,
            visibility: 'visible',
          },
        ]
        this.fontName = 'Arial Unicode MS'
        this.font = { name: this.fontName, family: 4, size: 13 }
        this.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF8DB4E2' } }
        this.border = { style: 'thin', color: { argb: 'cccccc' } }
      }
      /**
       * 导出excel
       * @param { Object } config 传入的excel对象
       * @param { Array } config.data excel的数据
       * @param { String } config.filename excel文件名
       * @param { Array } config.header excel的头部
       * @param { String } config.sheetName 表名
       * @param { Array } config.imageKeys 需要转化图片的key
       * @param { String } config.creator 创建表的人
       * @param { String } config.lastModifiedBy 最后修改表的人
       * @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 = this.defaultViews
        // 使工作表可见
        worksheet.state = 'visible'
        worksheet.columns = header
    
        for (let i = 1; i <= header.length; i++) {
          worksheet.getColumn(i).alignment = { vertical: 'middle', horizontal: 'center' }
          worksheet.getColumn(i).font = { name: 'Arial Unicode MS' }
        }
        worksheet.addRows(data)
        // 处理图片
        const imageList = this.getImageList(imageKeys, data, header)
        // 添加图片到sheet
        await this.addPicToSheet(imageList, imageKeys, workbook, worksheet)
        // 多级表头
        const headerOPtion = header.filter((item, index) => {
          if (item.type && item.type === 'multi') {
            header.splice(index, 1)
            return item
          }
          return item.type && item.type === 'multi'
        })
        // 多级表头重置设置表头
        if (headerOPtion.length) {
          headerOPtion[0].headerText.forEach((text, index) => {
            const borderAttr = { top: this.border, left: 
            this.border, bottom: this.border, right: this.border, index }
            const headerAttr = [
              {
                attr: 'values',
                value: text,
              },
              {
                attr: 'font',
                value: this.font,
              },
              {
                attr: 'fill',
                value: this.fill,
              },
              {
                attr: 'border',
                value: borderAttr,
              },
            ]
            headerAttr.map(item => {
              worksheet.getRow(index + 1)[item.attr] = item.value
              return worksheet
            })
          })
          headerOPtion[0].mergeOption.forEach(merge => {
            worksheet.mergeCells(merge)
          })
        } else {
          // 设置表头样式
          worksheet.getRow(1).font = this.font
          worksheet.getRow(1).fill = this.fill
        }
        const bufferContent = await workbook.xlsx.writeBuffer()
    
        // 设置
        ctx.set('Content-disposition', `attachment;filename=${filename}.xlsx`)
        // 返回文件buffer
        ctx.body = bufferContent
      }
      // 设置图片大小
      getImageList(imageKeys, data, header) {
        return imageKeys.map(
          key => data.map(
            (item, index) => ({
              key,
              url: item[key.name],
              col: this.app.utils.index.getIndexByKey(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 Promise.all(imageList.map(async imgArr => {
            return await Promise.all(imgArr.map(item => {
              const { url, width, height, row, col } = item
              // 因为有的图片是不存在的需要判断
              if (url) {
                return this.app.utils.index.getBase64(url, this.ctx).then(res => {
                  if (!url) return
                  const imgType = url.split('?')[0].substring(url.split('?')[0].
                  lastIndexOf('.') + 1).toLowerCase()
                  const id = workbook.addImage({
                    base64: res,
                    extension: imgType,
                  })
                  worksheet.addImage(id, {
                    tl: { col: col - 1, row: row - 1 },
                    ext: { width, height },
                  })
                  worksheet.getRow(row).height = height
                  // // 去掉背景链接
                  worksheet.getRow(row).getCell(item.key.name).value = ''
                })
              }
              return item
            }))
          }))
        }
      }
    }
    
    module.exports = exportFileService
    复制代码

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

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

![f5339a1fea631dc10e69855015d3d37c.png][] image.png ![497a6ea788140eb8090bb369d16f64d0.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/vnd.ms-excel' }}) {
      const ieKit = judgeBrowser('ie')
      const blobData = new Blob([file], option) // 生成 Blob文件
      if (ieKit && navigator.msSaveBlob) {
        navigator.msSaveBlob && navigator.msSaveBlob(blobData, fileName)
      } else {
        // 其他
        const save_link = document.createElement('a')
        const url = URL.createObjectURL(file) // 创建url
        save_link.href = url
        save_link.download = fileName
        document.body.appendChild(save_link)
        save_link.click()
        setTimeout(() => {
          document.body.removeChild(save_link)
          window.URL.revokeObjectURL(url) // 回收url
        }, 0)
      }
    }
    复制代码

调用

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

### 效果 ###

![d77484b81cbbd7b9eaf3c3cf8f698c13.gif][]

![dad550ca49b78adb4979c949402ce628.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![a7c72f763e2ec647d0adaffb52b9f8cd.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[e2a54938e7f811a8af7adaf44f6b9113.png]: /images/20221020/4cfe250280cf44229bc6eb0519e6d5c8.png
[4c49a1c8801bce4f461ec15afebff2e1.png]: /images/20221020/322ff23e280f43b6b2134155cc0eb8ac.png
[f17401a61fe03d8257dadc035311f445.png]: /images/20221020/5ff590ee41244be1b940acdfe5d3ca1c.png
[f5339a1fea631dc10e69855015d3d37c.png]: https://img-blog.csdnimg.cn/img_convert/f5339a1fea631dc10e69855015d3d37c.png
[497a6ea788140eb8090bb369d16f64d0.png]: /images/20221020/9e485c95895142e4bb1158d9016e0aed.png
[d77484b81cbbd7b9eaf3c3cf8f698c13.gif]: /images/20221020/f23463cfa508406abd187627800758ff.png
[dad550ca49b78adb4979c949402ce628.gif]: /images/20221020/84d07bcd76ed473db633ea7b345ee48b.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[a7c72f763e2ec647d0adaffb52b9f8cd.gif]: /images/20221020/e27bed981bd045b9af36f3c3b0d60863.png