前端导出表格 修改样式(xlsx-style)用法

这篇具有很好参考价值的文章主要介绍了前端导出表格 修改样式(xlsx-style)用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. 应用机制

        xlsx-style 修改样式的机制  就是选中哪一行,那一列或者哪一个  然后去修改  比如表格最左上角的一个格子 坐标是(0, 0)下标  也可以叫做 A1 选中之后  可以修改其样式 

二. 实战讲解

1. 下载依赖

npm install xlsx-style -S

  首先下载依赖到项目

2. 引入到项目

import * as XLSX from 'xlsx'

3. 创建导出表格

        为什么说是创建导出表格而不是表格呢,是因为导出表格跟原本页面展示的表格可能不一样,打比方我导出页面表格比普通的表格下方多一行注释 等等,如果导出表格跟页面展示的一样,则可以用改表格,否则创建一个新表格 v-show="false" 也就是隐藏掉,用来导出, 上代码

<el-table :data="tableDatas" border style="margin-left: 5%;width: 84%;" id="report-table"
  :header-cell-style="{ 'text-align': 'center' }" height="70vh" @row-dblclick="rowDblclick"
  :cell-style="{ 'text-align': 'center' }" v-show="false">
  <el-table-column :label="time + req.source + '检查问题统计报表'">
    <el-table-column label="序号" align="center" width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.index"> {{ scope.row.index }} </span>
        <span v-else>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="show('zdlb')" prop="caseTypeDetail" label="问题类别" width="300">
    </el-table-column>
    <el-table-column v-if="show('zdqyS')" prop="syncRoad" label="重点区域" width="300">
      <template slot-scope="scope">
        {{ scope.row.syncRoad }}
      </template>
    </el-table-column>
    <el-table-column v-if="show('zdqyC')" prop="community" label="重点区域" width="300">
      <template slot-scope="scope">
        <span v-if="scope.row.community == '合并'"> {{ scope.row.community }} </span>
        <selectTag v-else :type="communityData" :value="scope.row.community"></selectTag>
      </template>
    </el-table-column>
    <el-table-column prop="total" label="总数" width="100">
    </el-table-column>
    <el-table-column label="按时整改" width="200">
      <template slot-scope="{}" slot="header">
        <span>按时整改</span>
        <el-tooltip class="item" effect="dark" placement="top">
          <i class="el-icon-question" style="vertical-align: middle;color:red"></i>
          <div slot="content">
            <p>Tips:在规定时限内完成整改的案件</p>
          </div>
        </el-tooltip>
      </template>
      <el-table-column prop="ontimeNum" label="数量" width="100">
      </el-table-column>
      <el-table-column prop="ontimeScore" label="扣分" width="100">
      </el-table-column>
    </el-table-column>
    <el-table-column label="限时整改" width="200">
      <template slot-scope="{}" slot="header">
        <span>限时整改</span>
        <el-tooltip class="item" effect="dark" placement="top">
          <i class="el-icon-question" style="vertical-align: middle;color:red"></i>
          <div slot="content">
            <p>Tips:未在规定时限内完成整改的案件</p>
          </div>
        </el-tooltip>
      </template>
      <el-table-column prop="timelimitNum" label="数量" width="100">
      </el-table-column>
      <el-table-column prop="timelimitScore" label="扣分" width="100">
      </el-table-column>
    </el-table-column>
    <el-table-column label="超期整改" width="200">
      <template slot-scope="{}" slot="header">
        <span>超期整改</span>
        <el-tooltip class="item" effect="dark" placement="top">
          <i class="el-icon-question" style="vertical-align: middle;color: red"></i>
          <div slot="content">
            <p>Tips:超过规定时限内整改的案件</p>
          </div>
        </el-tooltip>
      </template>
      <el-table-column prop="overdueNum" label="数量" width="100">
      </el-table-column>
      <el-table-column prop="overdueScore" label="扣分" width="100">
      </el-table-column>
    </el-table-column>
    <el-table-column prop="accumulatedScore" label="累计扣分" width="100">
      <template slot-scope="scope">
        {{ scope.row.accumulatedScore ? parseFloat(scope.row.accumulatedScore).toFixed(2) : "" }}
      </template>
    </el-table-column>
    <el-table-column label="备注" width="100">
    </el-table-column>
  </el-table-column>
</el-table>

上面是源代码 可能过于复杂 我给大家上精简版

<el-table :data="tableDatas" border id="report-table" v-show="false">
  <el-table-column :label="time + req.source + '检查问题统计报表'">
    <el-table-column label="序号" align="center" width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.index"> {{ scope.row.index }} </span>
        <span v-else>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注" width="100">
    </el-table-column>
  </el-table-column>
</el-table>

重要的是:绑定在 el-table 这个标签里的 id 

4. 导出事件

事件内 我们一行一行细讲  首先  获取当前导出表格的数据  这个时候就要用上之前导出表格上方绑定的 id 了  我们声明一个 wb 去接收 表格内数据转化的二进制 blob

var wb = XLSX.utils.table_to_book(document.querySelector("#report-table"));

我们可以打印一下 wb 看看里面有什么东西

xlsxstyle,经验记载,前端,css,html

 而我们所需要修改的表格则在 wb.Sheets 下, 我们在打印一下 wb.Sheets

xlsxstyle,经验记载,前端,css,html

xlsxstyle,经验记载,前端,css,html

 如果你导出表格只有一张的话 wb.Sheets 下就只有 Sheet1 一个参数 如果有其他表的话 则有:Sheet2, Sheet3 ... 以此类推 

xlsxstyle,经验记载,前端,css,html

 Sheet1 下方参数

参数 表达含义
!cols 代表每一列,数据格式为数组,比如 [{wpx:100}, {wpx: 100}], 则表示为前两列的宽为 100px
!merge 合并单元格,数据格式为数组 [{s:{r:0,c:0},e:{r:0,c:6}}], s(start)为开始单元格坐标,e(end)为结束单元格坐标,r (row)行,c(col)列,这里的例子代表合并第0行第0到 第0行第6个单元格
A1 A1 代表单元格第一行第一个 往右走则是 B1, C1...这个可以参照导出表格里的 A列第一行 每个单元格都有其格式 {t:"s", s: {}, v:""  }, t(type)为类型 其参数有:n(number数字类型),s(string字符串类型);s(style)里面参数为样式,你想要修改单元格的内部样式,v(value)是单元格内容

知道参数  那么我们就继续上代码了

比方:我要修改前24列的单元格宽

// 表Sheet1
wb.Sheets.Sheet1["!cols"] = [];
// 动态添加前24列  宽为140px
for (let a = 0; a < 24; a++) {
  wb.Sheets.Sheet1["!cols"].push({
    wpx: 140,
  })
}

表格添加边框并修改字体

let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
// 循环渲染表格样式
arr.forEach((item) => {
    for (let i = 1; i < 7 + this.tableData.length; i++) {
        let str = (item + i).toString();
        if (wb.Sheets.Sheet1[str]) {
            wb.Sheets.Sheet1[str].s = { 
              font: {
                name: "宋体",
                sz: 14,
                // bold: true,
                // color: { rgb: "FC5531" }
              },
              border: {
                top: {
                  style: 'thin',
                  color: {
                    auto: 1
                  }
                },
                left: {
                    style: 'thin',
                  color: {
                    auto: 1
                  }
                },
                right: {
                  style: 'thin',
                  color: {
                    auto: 1
                  }
                },
                bottom: {
                  style: 'thin',
                  color: {
                    auto: 1
                  }
                }
              },
              alignment: {
                // 居中
                horizontal: "center",
                vertical: "center",
                indent: 0,
              },
            }
        }
    })
})

        先循环 arr 再循环 this.tableData.length 是因为  循环相加之后 拼凑成 A1 A2 B1 B2 ... 这样类型的 wb.Sheets.Sheet1[str].s 则是修改它的样式

xlsxstyle,经验记载,前端,css,html

 手动合并单元格(手动合并可能会导致表格报问题)

// 手动合并  最后三行注释
wb.Sheets.Sheet1["!merges"].push({
  e: {
    r: parseInt(_tableData.length + 2), c: 0
  },
  s: {
    r: parseInt(_tableData.length + 4), c: 5
  }
})

xlsxstyle,经验记载,前端,css,html

 这个点 即可 还得研究一下 怎么解决

结束  打完 手工

        文章来源地址https://www.toymoban.com/news/detail-647129.html

到了这里,关于前端导出表格 修改样式(xlsx-style)用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端使用xlsx-js-style导出Excel文件并修饰单元格样式

    安装 导出 excel 较常见的 js 库是之一是 xlsx, xlsx 算是基础版本,不能对单元格进行样式(对齐方式、文字颜色、背景颜色等)的修饰,如果需要修饰单元格,可使用 xlsx-js-style 引入 需要导出的数据源 将数据源转成需要的二维数组 定义 Excel 表头 将定义好的表头添加到 body

    2023年04月08日
    浏览(44)
  • vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库)

    xlsx 是由 SheetJS 开发的一个处理excel文件的npm库 适用于前端开发者实现导入导出excel文件的经典需求 为了区别于xlsx文件,突出其应用语言,该库通常又被称为 js-xlsx 需要以下步骤: 安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库,也可以将 xlsx 下载到本地,然后在 HTML 文件中

    2024年02月16日
    浏览(47)
  • 前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法

    一、vue实现导出excel 1、前端实现 xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库,你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。 更多介绍可参见官网 1、安装xlsx依赖 2、引

    2024年01月23日
    浏览(77)
  • 前端vue导出excel(标题加粗+表头自定义样式+表格边框+单元格自定义样式)

    接近过年,被一大堆excel报表烦死的我,遇到要求前端导出excel的后端,差点猝死的我拼命学习中,整理出这篇文章,希望看到这篇文章的你有所收获,也希望能收到大佬们的指点 之前用c#,.net弄过导出word,excel,可以点击查看.NET使用Aspose控件生成Word(可构建自定义表格)、

    2024年04月15日
    浏览(56)
  • uniapp - 微信小程序JSON数据导出表格(XLSX)

    uniapp-微信小程序导出表格(XLSX) 这篇文章苦于,后端没有提供下载接口,前端的小伙伴自己要处理Json数据的情况下 用到了,由Sheet.js出品的 js-xlsx 是一款非常方便的只需要纯JS即可读取和导出excel的工具库,用于多种电子表格格式的解析器和编写器。 这里只说明xlsx导出 其

    2024年02月16日
    浏览(32)
  • Vue xlsx插件前端导出

    一、安装 xlsx 二、具体使用整体代码 如果数据格式是这样就用下面的,直接把数据传到 XLSX.utils.json_to_sheet

    2024年02月06日
    浏览(39)
  • 前端JS实现导出xlsx文件

    需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。 使用的插件: js-export-excel 安装: npm install js-export-excel 使用: 亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端

    2024年02月04日
    浏览(57)
  • 记录--前端如何优雅导出多表头xlsx

    xlsx导出是比较前后端开发过程中都比较常见的一个功能。但传统的二维表格可能很难能满足我们对业务的需求,因为当数据的维度和层次比较多时,二维表格很难以清晰和压缩的方式展现所有的信息,所以我们也就经常能碰到多级表头开发了。 每当我们新使用一个插件的时候

    2024年02月09日
    浏览(41)
  • xlsx库实现纯前端导入导出Excel

    最近做了前端导入、导出 Excel 的需求,用到了 js-xlsx 这个库,该库文档提供的用例很少,并不是很友好。本文总结一下我是如何实现需求的。 提供一个 Excel 文件,将里面的内容转成 JSON 导入数据 提供一个 JSON 文件,生成 Excel 文件并导出 导入与导出既可以前端做,也可以后

    2023年04月08日
    浏览(51)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包