iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue-electron中修改表格内容并修改样式
  • 908
分享到

vue-electron中修改表格内容并修改样式

vue-electron修改表格样式 2023-05-20 08:05:05 908人浏览 安东尼
摘要

目录需求技术xlsx-style全部代码需求 将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽高合并颜色等)不能改变。 技术 electronxlsxxlsx-styl

需求

将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽高合并颜色等)不能改变。

技术

  • electron
  • xlsx
  • xlsx-style
  • node-xlsx
yarn add xlsx
yarn add xlsx-style
yarn add node-xlsx

xlsx-style

xlsx-style 的一些源码修改是根据网上一些博主的文章来的。如下所示:

使用xlsx-style 的时候要注意,使用的是会报错误,所以,我们需要改他的源码,下面是正确的修改方式,代码如下(示例)

# 第一步 修改nod_modules 里面xlsx-style文件夹下面dist文件夹下的cpexcel.js文件
807: var cpt = cptable;
# 第二步 修改xlsx-style文件夹下面ods.js文件
10: return require('./' + 'xlsx').utils;
12: try { return require('./' + 'xlsx').utils; }
# 第三步 修改xlsx-style文件夹下面的xlsx.js文件 替换write_ws_xml_data以下方法
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {
 var o = [], r = [], range = safe_decode_range(ws['!ref']), cell, ref, rr = "", cols = [], R, C,rows = ws['!rows'];
 for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);
 for(R = range.s.r; R <= range.e.r; ++R) {
   r = [];
   rr = encode_row(R);
   for(C = range.s.c; C <= range.e.c; ++C) {
     ref = cols[C] + rr;
     if(ws[ref] === undefined) continue;
     if((cell = write_ws_xml_cell(ws[ref], ref, ws, opts, idx, wb)) != null) r.push(cell);
   }
   if(r.length > 0){
  params = ({r:rr});
  if(rows && rows[R]) {
   row = rows[R];
   if(row.hidden) params.hidden = 1;
   height = -1;
   if (row.hpx) height = px2pt(row.hpx);
   else if (row.hpt) height = row.hpt;
   if (height > -1) { params.ht = height; params.customHeight = 1; }
   if (row.level) { params.outlineLevel = row.level; }
  }
  o[o.length] = (writextag('row', r.join(""), params));
 }
 }
if(rows) for(; R < rows.length; ++R) {
 if(rows && rows[R]) {
  params = ({r:R+1});
  row = rows[R];
  if(row.hidden) params.hidden = 1;
  height = -1;
  if (row.hpx) height = px2pt(row.hpx);
  else if (row.hpt) height = row.hpt;
  if (height > -1) { params.ht = height; params.customHeight = 1; }
  if (row.level) { params.outlineLevel = row.level; }
  o[o.length] = (writextag('row', "", params));
 }
}
 return o.join("");
}

全部代码

upload方法分析

通过pdfWord.testImage()读取到表格(node环境),然对list数据里面的表格进行内容的修改以及填充,修改内容以后就将其样式调整以及转换数据类型并下载

testImage() {
    const a2 = path.join('C:\\Users\\op\\Desktop', '副本.xlsx')
    const sheets = xlsx.parse(a2);
    //读取xlxs的sheet1 
    const sheetData = sheets[0].data;
    return sheets[0].data;
  },
  • openDownloadDialog 下载
  • sheet2blob 将样式修改后的表格转为blob格式
  • xlsxAddStyle 修改样式

其他的属性大家可以看文档即可看明白,我只能大家说一下三个自认为比较重要的东西

1."!cols"(代码中:sheet["!cols"])= 指每列单元格一列的宽度,按先后顺序排列
2."!rows"(代码中:sheet["!rows"])= 指每行单元的一行的高度,按先后顺序排列
3."!merges"(代码中:sheet["!merges"])= 指合并;没有先后顺序。s:开始 e:结束 r:列 c:行

以上三种都是可以让用户自己控制的属性,至于其他的就需要你们根据自己的需求进行调整了

在修改样式中我们会看到element一个变量;他们可以去打印这个变量查看其中的属性;你们可以到时里面有许多样式结构,你只需要根据自己想要的去修改即可。

<template>
  <div class="page">
    <el-button type="primary" @click="upload">主要按钮</el-button>
  </div>
</template>
<script>
import XLSXStyle from "xlsx-style";
import * as XLSX from "xlsx";
import pdfWord from "@/utils/tool/pdf-word";
export default {
  name: "duplication",
  components: {},
  props: {},
  data() {
    return {
    };
  },
  created() {},
  methods: {
    upload() {
      let list = pdfWord.testImage();
      console.log(list);
      for (let i = 0; i < list.length - 1; i++) {
        // console.log('op',list[i]);
        if (i == 5) {
          list[i] = [3, "爱情", "xx", "ssd", "wdsda"];
        }
      }
      const sheet = this.xlsxAddStyle(list);
      this.openDownloadDialog(this.sheet2blob(sheet), `1.xlsx`);
      return;
    },
    // 下载
    openDownloadDialog(url, saveName) {
      var urlA;
      if (typeof url === "object" && url instanceof Blob) {
        urlA = URL.createObjectURL(url); // 创建blob地址
      }
      const aLink = document.createElement("a");
      aLink.href = urlA;
       // 2.直接使用自定义文件名,设置下载文件名称
      aLink.setAttribute('download', saveName )
      document.body.appendChild(aLink)
      // 模拟点击下载
      aLink.click()
      // 移除改下载标签
      document.body.removeChild(aLink);
    },
    // 转为blob文件
    sheet2blob(sheet, sheetName) {
      var sheetNameS = sheetName || "sheet1";
      var workbook = {
        SheetNames: [sheetNameS],
        Sheets: {},
      };
      workbook.Sheets[sheetNameS] = sheet;
      // 生成excel的配置项
      var wopts = {
        bookType: "xlsx", // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本iOS设备上有更好的兼容性
        type: "binary",
      };
      var wbout = XLSXStyle.write(workbook, wopts);
      // XLSXStyle.write(wb, { bookType: bookType, bookSST: false, type: 'binary' });
      var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
      // 字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      };
      return blob;
    },
    // 修改样式
    xlsxAddStyle(xlsx) {
      const sheet = XLSX.utils.aoa_to_sheet(xlsx);
      // 单元格外侧有框线
      const borderAll = {
        top: { style: "thin" },
        bottom: { style: "thin" },
        left: { style: "thin" },
        right: { style: "thin" },
      };
      // 单元格外侧无框线
      const noBorder = {
        top: { style: "thin" },
        bottom: { style: "thin" },
        left: { style: "thin" },
        right: { style: "thin" },
      };
      for (const key in sheet) {
        if (Object.hasOwnProperty.call(sheet, key)) {
          const element = sheet[key];
          if (typeof element === "object") {
            const index = Number(key.slice(1)) - 1;
            let alignment = {
              horizontal: "center", // 所有单元格右对齐
              vertical: "center", // 所有单元格垂直居中
              wrapText: true, //自动换行 需申报物品
            };
            element.s = {
              alignment: alignment,
              font: {
                name: "宋体",
                sz: 12,
                italic: false,
                underline: false,
              },
              border: borderAll,
              fill: {
                fGColor: { rgb: "FFFFFFFF" },
              },
            };
            if (index === 0) {
              element.s.font.bold = true; // 加粗
            }
            // 标题的样式
            if (index === 2) {
              // element.s.font.bold = true; // 加粗
              // element.s.fill.fgColor = { rgb: "FFCCFFFF" };
            }
          }
        }
      }
      // 表头的样式设置
      sheet["A1"].s.alignment.horizontal = "center";
      sheet["A1"].s.font.underline = false;
      sheet["A1"].s.font.sz = 18;
      sheet["A1"].s.border = noBorder;
      // 单元格的列宽
      sheet["!cols"] = [
        { wpx: 37 },
        { wpx: 87 },
        { wpx: 45 },
        { wpx: 69 },
        { wpx: 176 },
        { wpx: 71 },
        { wpx: 53 },
        { wpx: 73 },
        { wpx: 51 },
      ];
      sheet["!rows"] = [
        { hpx: 47 },
        { hpx: 63 },
        { hpx: 48 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 24 },
        { hpx: 50 }, // 19行 - 实际 18(索引)
        { hpx: 34 },
        { hpx: 46 },
        { hpx: 87 },
      ];
      // r:列 c:行 s:开始 e:结束
      sheet["!merges"] = [
        { e: { c: 7, r: 0 }, s: { c: 0, r: 0 } },
        { e: { c: 7, r: 1 }, s: { c: 0, r: 1 } },
        { e: { c: 7, r: 18 }, s: { c: 0, r: 18 } },
        { e: { c: 7, r: 19 }, s: { c: 0, r: 19 } },
        { e: { c: 7, r: 20 }, s: { c: 0, r: 20 } },
        { e: { c: 7, r: 21 }, s: { c: 0, r: 21 } },
        { e: { c: 8, r: 1 }, s: { c: 8, r: 17 } },
      ];
      return sheet;
    },
  },
  computed: {},
  watch: {},
  mounted() {},
};
</script>
<style scoped lang="less">
</style>

到此这篇关于Vue-electron中修改表格内容并修改样式的文章就介绍到这了,更多相关vue-electron修改表格样式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue-electron中修改表格内容并修改样式

本文链接: https://www.lsjlt.com/news/214217.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue-electron中修改表格内容并修改样式
    目录需求技术xlsx-style全部代码需求 将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽高合并颜色等)不能改变。 技术 electronxlsxxlsx-styl...
    99+
    2023-05-20
    vue-electron修改表格样式
  • vue-electron中如何修改表格内容和样式
    今天小编给大家分享的是vue-electron中如何修改表格内容和样式,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。需求将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽...
    99+
    2023-08-03
  • MySQL怎么修改表格内容
    要修改MySQL表格的内容,可以使用UPDATE语句。下面是一个基本的语法示例: UPDATE table_name SET col...
    99+
    2024-04-09
    MySQL
  • 怎么使用jQuery修改表格内容
    今天小编给大家分享一下怎么使用jQuery修改表格内容的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。JQuery是一个著名的...
    99+
    2023-07-06
  • Ant Design Vue 修改表格头部样式的详细代码
    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。首先用到的是customHeaderRow这个API,类型是一个函数 1.HTML部分 <a...
    99+
    2022-11-13
    Ant Design Vue表格头部样式 Ant Design Vue表格头部
  • ElementPlus怎么修改表格行和单元格样式
    这篇文章主要介绍“ElementPlus怎么修改表格行和单元格样式”,在日常操作中,相信很多人在ElementPlus怎么修改表格行和单元格样式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ElementPl...
    99+
    2023-06-30
  • sql修改表内容的方法
    小编给大家分享一下sql修改表内容的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!sql中修改表的内容有以下三种方法分别是:使用SSMS数据库管理工具修改内容,使用T-SQL脚本修改内容以...
    99+
    2024-04-02
  • sql如何修改表的内容
    要修改表的内容,可以使用 SQL 的 UPDATE 语句。语法如下: UPDATE 表名 SET 列名1 = 值1, 列名2 = 值...
    99+
    2024-03-05
    sql
  • Element Plus修改表格行和单元格样式详解
    目录前言设置某一行的样式设置某一个单元格的样式表头样式修改(赠品)总结前言 实习工作需要根据表格的状态字段来设置行的样式,记录一波。 先来一下基础配置。(Vue3) <temp...
    99+
    2024-04-02
  • element.style内联样式怎么修改
    这篇文章主要介绍了element.style内联样式怎么修改,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言我们在写前面 web页面样式的时候,会发现有些时候,我们怎么修改...
    99+
    2023-06-08
  • vue实现修改标签中的内容:idclassstyle
    目录vue修改标签的内容:id class stylev-bind,v-model注意动态改变class和style的一些方法使用$event下面的函数处理vue修改标签的内容:id...
    99+
    2024-04-02
  • mysql怎么修改数据表内容
    要修改MySQL数据表的内容,可以使用以下几种方法: 使用UPDATE语句:使用UPDATE语句可以更新数据表中的记录。...
    99+
    2024-02-29
    mysql
  • 如何批量修改sql表内列内容
    要批量修改 SQL 表内列的内容,可以使用 UPDATE 语句来实现。下面是一个简单的示例: UPDATE table_name S...
    99+
    2024-04-08
    sql
  • vue怎么修改滚动条样式
    本篇内容主要讲解“vue怎么修改滚动条样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么修改滚动条样式”吧!首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。注...
    99+
    2023-06-25
  • css如何修改行内的样式
    本文小编为大家详细介绍“css如何修改行内的样式”,内容详细,步骤清晰,细节处理妥当,希望这篇“css如何修改行内的样式”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 行内款式...
    99+
    2024-04-02
  • mysql怎么修改表编码格式
    mysql中修改表编码格式的方法首先,在命令行中启动MySQL服务;sudo service mysql startMySQL服务启动后,输入用户名和密码登录MySQL;mysql -u r...
    99+
    2024-04-02
  • php如何修改数据库中子表内容
    在PHP中,可以使用SQL语句的UPDATE命令来修改数据库中子表的内容。以下是一个示例代码:```php...
    99+
    2023-08-23
    php 数据库
  • sql如何修改数据库表内容
    要修改数据库表内容,可以使用SQL的UPDATE语句。以下是一个示例: UPDATE table_name SET column1 ...
    99+
    2024-04-11
    sql
  • python中修改文件行内容
    fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行。它的工作方式和readlines很类似,不同点在于它不是将全部的行读到列表中而是创建了一个xreadlines对象。下面是fil...
    99+
    2023-01-31
    文件 内容 python
  • vue修改滚动条样式的方法
    目录首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。 注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作