VUE前端使用exceljs导出table以及echart图 生成excel文件

最近项目新增一个需求:导出部分列表数据(较少)以及生成的echart图放到一个excel文件中,全部需要在前端完成        

  exceljs 文档地址

1、安装

//安装
npm install file-saver --save  //保存文件使用
npm install exceljs --save

2、引入

//组件中引入

import ExcelJS from 'exceljs'
import fileSave from 'file-saver'
import * as echarts from 'echarts'  // 导入图片使用
import $ from 'jquery'

3、导出后端返回数据(需处理)

        let data = res.data  //接口返回数据
        const workbook = new ExcelJS.Workbook()
        const worksheet = workbook.addWorksheet('Sheet1')
        //根据数据自己调整
        worksheet.columns = [
          { header: '名称', key: 'name', width: 24 },
          { header: '在线', key: 'countOnline', width: 24 },
          { header: '离线', key: 'countOffline', width: 24 },
          { header: '百分比', key: 'onlineRate', width: 24 }
        ]
        worksheet.getRow(1).font = {
          size: 12,
          bold: true
        }
        worksheet.addRows(data)

        workbook.xlsx.writeBuffer().then(buffer => {
        //这里为type
          const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
          fileSave(blob, `设备状况表.xlsx`)
        })

如果只是简单导出一些数据  上面即可实现,但是由于还需要将这些数据展示为echart柱状图,并生成图片插入到excel的sheet2中,简单看下  exceljs中有个addImage方法,参数为:base64/filename 与extension

后端可以在Node中使用 node-echarts-canvas 插件直接实现渲染  将图片从插入到excel表中,但是前端无法使用,于是想了个折中的方式,先在页面渲染出一个 echart图标,再使用canvas画出并获取到生成图片的base64字符串,后袖写入到excel中

4、渲染echart  画canvas

//Echarts设置为绝对定位  并设置z-index:-1;
 <div class="Echarts">
      <div id="main" style="width: 2000px;height: 2000px;"></div>
      <canvas class="canvas" width="2000" height="1000"></canvas>
 </div>

JS部分

        //根据后端返回数据做一下echart的配置文件渲染echarts
        const source = []
        for (const res of res.data) {
          const obj = {
            在线: res.countOnline,
            离线: res.countOffline,
            在线率: (res.countOnline / res.countAll).toFixed(2)
          }
          obj.countType = res.deviceTypeName
          source.push(obj)
        }
        const dataset = {
          dimensions: ['countType', '在线', '离线', '在线率'],
          source
        }

    
       const option = {
          legend: {
            top: '20%',
            right: '30%'
          },
          grid: {
            show: false,
            top: '15%', 
            right: '5%',
            bottom: '10%',
            left: '10%'
          },
          tooltip: {},
          animation: false,
          dataset,
          xAxis: {
            type: 'category',
            textStyle: {
              color: 'red',
              fontSize: '80',
              itemSize: ''
            }
          },
          yAxis: {
            textStyle: {
              color: 'red',
              fontSize: '80',
              itemSize: ''
            }
          },
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        }


    //渲染图表
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption(option)

好了 此时渲染成功,后面就是将图表使用canvas画出来得到base64

    //这里部分·可以放在上面workbook.xlsx.writeBuffer()。。。之前   自己封装吧
var baseCanvas = $('.canvas').first()[0]
      if (!baseCanvas) {
        return false
      }
      var width = baseCanvas.width
      var height = baseCanvas.height
      var ctx = baseCanvas.getContext('2d')
      ctx.drawImage(baseCanvas, 0, 0, width, height)
      let base64 = baseCanvas.toDataURL()
// 此时获取到了渲染的echart图片的base64,后续报表添加sheet2
        const picsheet = workbook.addWorksheet('Sheet2')
        const imageId2 = workbook.addImage({
          base64: base64,
          extension: 'png'
        })
        picsheet.addImage(imageId2, {
          tl: { col: 3, row: 4 },
          ext: { width: 1600, height: 800 }
        })

//生成excel文件
          workbook.xlsx.writeBuffer().then(buffer => {
          const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
          saveAs(blob, `设备报表.xlsx`)
        })

效果如下

sheet2里面如下

 

后续细节自行调整

 

 

  • 3
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在 Vue 前端调用后端接口导出 Excel 文件,可以采用以下步骤: 1. 在后端编写导出 Excel 的接口,通常采用 Spring MVC 或者 Express 等框架,在接口中使用 Apache POI 或者其他 Excel生成 Excel 文件,并将生成文件以流的形式返回给前端。 2. 在前端编写调用后端接口的代码,通常可以使用 axios 或者其他 HTTP 请求库来发送请求,并将返回的文件流保存到本地,同时进行下载操作。 以下是一个简单的 Vue 组件示例代码: ```html <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> <script> import axios from 'axios' export default { methods: { exportExcel() { axios({ url: '/api/export', method: 'GET', responseType: 'blob', }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'export.xlsx') document.body.appendChild(link) link.click() }) }, }, } </script> ``` 以上代码中,我们定义了一个 `exportExcel` 方法,当用户点击按钮时会触发该方法。在方法中,我们使用 axios 发送 GET 请求,并将响应类型设置为 blob,这样可以保留文件流的形式。在获取到响应后,我们将其转换为 URL 对象,创建一个下载链接,并触发点击操作,从而实现文件的下载。我们可以将请求的 URL 设置为后端提供的接口,例如 `'/api/export'`,从而实现与后端的交互。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值