Vue通过 data（table）下载 xlsx 文件

最新推荐文章于 2023-04-12 16:02:05 发布

coder_wangs

最新推荐文章于 2023-04-12 16:02:05 发布

阅读量795

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/web_wp/article/details/121786688

版权

本文介绍了一种使用XLSX库将数据转换为Excel文件的方法。通过导入XLSX库，定义了一个名为downloadXlsx的函数，该函数接受数据列表和文件名作为参数，将数据转换为字节流并创建Excel工作簿。在模板中，通过点击事件调用此函数，实现了表格数据的下载。示例中展示了如何处理和下载包含日期、姓名和地址信息的表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，下载依赖包 npm install xlsx -S

二，方法文件定义

import XLSX from 'xlsx'
export const downloadXlsx = (dataList, fileName) => {
	// 字符串转成字节流
    const stringToBuff = str => {
        var buf = new ArrayBuffer(str.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != str.length; ++i) {
            view[i] = str.charCodeAt(i) & 0xff
        }
        return buf;
    }
   	// 初始化Excel表格
    let workbook = XLSX.utils.book_new();
    let worksheet = XLSX.utils.aoa_to_sheet(dataList);
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');
    // XLSX.utils.export_json_to_excel({autoWidth: true})
    // 字节流转成二进制
    let xlsxBlob = new Blob([stringToBuff(XLSX.write(workbook, {bookType: 'xlsx', bookSST: false, type: 'binary'}))], {type: ''})

    const a = document.createElement('a');
    a.href = URL.createObjectURL(xlsxBlob);
    a.download = fileName;
    a.click()
}

三，调用 Util 方法

<template>
  <div>
    <el-button type="text"
               @click="IdClick">表格信息下载</el-button>
  </div>
</template>
<script>
import { downloadXlsx } from './Util/index'
export default {
    data(){
        return {
            //需要下载的数据（借用 Element UI 表格数据）
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]        }
    },
    methods:{
     IdClick() {
        //存储数据
      let dataList = []
      dataList.push(['日期','姓名','地址'])
      this.tableData.forEach((item) => {
        dataList.push([item.date,item.name,item.address])
      })
      // 封装我们需要导出的数据信息
      const today = new Date().Format('yyyy_MM_dd_HH_mm')
      // 这里直接调用
      downloadXlsx(dataList, `id_list信息——${today}.xlsx`)
    },
    }
}
</script>