一、分表导出

分表导出
import FileSaver from "file-saver";
import * as XLSX from "xlsx";


exportExcel() {
    let totalData = this.result_monthList_view // 数据总量
    const page = Math.ceil(totalData.length / this.itemNumberPerPage)
    for(let i = 0; i < page ; i++) {
      const start = i * this.itemNumberPerPage;
      const end = (i + 1) * this.itemNumberPerPage;
      const data = totalData.slice(start, end)
 
      // 将数据转换成Excel文件
      const worksheet = XLSX.utils.json_to_sheet(data)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, `Sheet${i+1}`)
      const buf = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' })
 
      // 下载Excel文件
      const blob = new Blob([buf], {type: "application/octet-stream;charset=utf-8'"})
      saveAs(blob, `文件名_${i+1}.xlsx`)
    }
  },

 二、不带样式导出

不带样式导出
export function htmlToExcel(dom,title){
        let excelTitle = title
        let wb = XLSX.utils.table_to_book(document.querySelector(dom))
        let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array"})
        try {
            FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream"}),
                excelTitle + ".xlsx"
            )
        }catch(e) {
            if (typeof console !== "undefined") console.log(e, wbout)
        }
        return wbout
}

 三、导出带样式

import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import * as XLSXS from 'xlsx-style';


export function htmlToStyleExcel(dom,title){
    var xlsxParam = { raw: false };//转换成excel时，使用原始的格式
    let excelTitle = title
    let wb = XLSX.utils.table_to_book(document.querySelector(dom),xlsxParam)
    const sheet=wb.Sheets[wb.SheetNames[0]]
    for(let key in sheet){
        if (key == "!ref" || key == "!cols" || key == "!merges" || key == "Am" || key == "!fullref" || key =="!rows") {
        }else{
          sheet[key].s={
            alignment: {
                    wrapText: true,
                    horizontal: "center",
                    vertical: "center"
                  },
                  font: {
                    name: "仿宋",
                    sz: 11
                  }
          }
        }
      }
    // console.log(sheet);
    let wbout = XLSXS.write(wb, {bookType: 'xlsx', bookSST: false, type: 'buffer',} )
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream"}),
            excelTitle + ".xlsx"
        )
    }catch(e) {
        if (typeof console !== "undefined") console.log(e, wbout)
    }
    return wbout
}

四、导出xlsx表格时出现的报错问题

 1.:jszip is not a constructor

解决思路：

1.降低xlsx版本  npm i --save xlsx@0.10.0

2.通过命令：“npm i node-polyfill-webpack-plugin -D” 安装Webpack 插件。在vue.config.js文件配置如下：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
        new NodePolyfillPlugin()
      ]
    }
})

五.文件导出

import FileSaver from 'file-saver'
import {
  saveAs
} from 'file-saver'
const data='hahah'
const blob=new Blob([data],{type: 'text/json;charset=utf-8'})
FileSaver.saveAs(blob,'hello.txt')

这里写一个文件导出的例子

<!-- 表格导出案例 -->
<template>
    <div>
      <el-button type="primary" style="margin: 20px" @click="handerExcelFn">导出</el-button>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center"></el-table-column>
        <el-table-column prop="date" label="时间" align="center"></el-table-column>
        <el-table-column label="详细地址" align="center">
          <el-table-column prop="province" label="省份" align="center"></el-table-column>
          <el-table-column prop="city" label="市区" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
          <el-table-column prop="zip" label="邮编" align="center"></el-table-column>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="表格保存预览" width="70%" :visible.sync="selectDialogType">
        <el-table :data="selectData" id="selectTable" height="380px">
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="gender" label="性别" align="center"></el-table-column>
          <el-table-column prop="date" label="时间" align="center"></el-table-column>
          <el-table-column label="详细地址" align="center">
            <el-table-column prop="province" label="省份" align="center"></el-table-column>
            <el-table-column prop="city" label="市区" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column prop="zip" label="邮编" align="center"></el-table-column>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="exportExcel">确定保存</el-button>
          </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import {htmlToExcel,htmlToStyleExcel} from '@/utils/htmlToExcel'
  export default {
    data() {
      return {
        tableData: [
          {
            name: '小黑',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小白',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小绿',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小蓝',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
          {
            name: '小紫',
            gender:'男',
            date:'2024-01-01',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙路 1518 弄',
            zip: '200333',
          },
        ],
        selectData: [],
        selectDialogType:false
      }
    },
    methods: {
      handerExcelFn() {
        if (this.selectData.length < 1) {
          this.$message.error('请选择要导出的内容')
          return false
        }
        this.selectDialogType = true
      },
      handleSelectionChange(val) {
        this.selectData = val
      },
      exportExcel() {
        // htmlToExcel('#selectTable', '表格数据')
        htmlToStyleExcel('#selectTable', '表格数据')
      },
    },
  }
  </script>

import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import * as XLSXS from 'xlsx-style';
export function htmlToExcel(dom,title){
    var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
    let excelTitle = title
    let wb = XLSX.utils.table_to_book(document.querySelector(dom),xlsxParam)

    let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array"})
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream"}),
            excelTitle + ".xlsx"
        )
    }catch(e) {
        if (typeof console !== "undefined") console.log(e, wbout)
    }
    return wbout
}

export function htmlToStyleExcel(dom,title){
    var xlsxParam = { raw: false };//转换成excel时，使用原始的格式
    let excelTitle = title
    let wb = XLSX.utils.table_to_book(document.querySelector(dom),xlsxParam)
    const sheet=wb.Sheets[wb.SheetNames[0]]
    for(let key in sheet){
        if (key == "!ref" || key == "!cols" || key == "!merges" || key == "Am" || key == "!fullref" || key =="!rows") {
        }else{
          sheet[key].s={
            alignment: {
                    wrapText: true,
                    horizontal: "center",
                    vertical: "center"
                  },
                  font: {
                    name: "仿宋",
                    sz: 11
                  }
          }
        }
      }
    // console.log(sheet);
    let wbout = XLSXS.write(wb, {bookType: 'xlsx', bookSST: false, type: 'buffer',} )
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream"}),
            excelTitle + ".xlsx"
        )
    }catch(e) {
        if (typeof console !== "undefined") console.log(e, wbout)
    }
    return wbout
}

六、后端导出

export function export951Api(obj?: Object) {
	return request({
		url: '/dataPrepare/govDataLineSellPrice/export/951',
		method: 'post',
		data: obj,
		responseType: 'arraybuffer'
	})
}    

export951Api(obj).then(res => {
        const workbook = XLSX.read(res, { type: 'buffer' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        // 设置单元格样式
        for (let i = 1; i < data.length; i++) { // 跳过表头
            for (let j = 0; j < data[i].length; j++) {
                const cellAddress = XLSX.utils.encode_cell({ r: i, c: j });
                const cell = worksheet[cellAddress];
                if (cell && cell.v) {
                    if (typeof cell.v === 'number') {
                        if (cell.v < 0) {
                            cell.s = { font: { color: { rgb: "FF0000" } } }; // 负值为红色
                        } else if (cell.v > 0) {
                            cell.s = { fill: { fgColor: { rgb: "FFFF00" } } }; // 正值为黄色
                        } else {
                            cell.s = { fill: { fgColor: { rgb: "red" } } }; // 0为白色
                        }
                    }
                }
            }
        }

        // 创建一个新的工作簿并将修改后的工作表添加进去
        const newWorkbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(newWorkbook, worksheet, 'Sheet1');

        // 导出带样式的Excel文件
        XLSX.writeFile(newWorkbook, '日损益回测.xlsx');
    })

# 前端 # javascript # 开发语言
GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：4 个月前 )
9e887079 [skip ci] 3 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区
cover

2025 GitCode 开发者冬日嘉年华：AI 与开源的深度交融之旅

avatar GitCode 开源社区
cover

GitCode 光引计划投稿 | GoIoT：开源分布式物联网开发平台

avatar GitCode 开源社区