<dl id="r7hd5"><delect id="r7hd5"></delect></dl>
<dl id="r7hd5"><i id="r7hd5"><font id="r7hd5"></font></i></dl><dl id="r7hd5"><i id="r7hd5"><meter id="r7hd5"></meter></i></dl>
<video id="r7hd5"></video><dl id="r7hd5"><delect id="r7hd5"></delect></dl>
<dl id="r7hd5"><delect id="r7hd5"></delect></dl><dl id="r7hd5"></dl>
<video id="r7hd5"></video> <video id="r7hd5"></video><dl id="r7hd5"></dl><dl id="r7hd5"><i id="r7hd5"><meter id="r7hd5"></meter></i></dl>
<dl id="r7hd5"><i id="r7hd5"></i></dl>
<dl id="r7hd5"></dl><dl id="r7hd5"></dl>
<video id="r7hd5"><i id="r7hd5"></i></video><dl id="r7hd5"></dl><dl id="r7hd5"></dl>
<video id="r7hd5"><i id="r7hd5"><delect id="r7hd5"></delect></i></video>
<i id="r7hd5"></i>
<video id="r7hd5"></video>
<dl id="r7hd5"><delect id="r7hd5"></delect></dl>
溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue-electron中如何修改表格內容和樣式

發布時間:2023-07-14 11:16:18 來源:億速云 閱讀:149 作者:栢白 欄目:開發技術

今天小編給大家分享的是vue-electron中如何修改表格內容和樣式,相信很多人都不太了解,為了讓大家更加了解,所以給大家總結了以下內容,一起往下看吧。一定會有所收獲的哦。

需求

將表格導入并向其添加內容,然后導出表格,且表格樣式(一般是值寬高合并顏色等)不能改變。

技術

  • 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中如何修改表格內容和樣式就分享到這里了,希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

国语自产精品视频_91超碰人人澡夜夜澡_欧美777精品久久久久网_97精品国产一区二区三区_久久婷婷大香萑太香蕉av 精品一久久香蕉国产线看观 无码草草草在线观看 国产v亚洲v天堂a无码 国产日韩一区二区三区免费高清 天天爽夜夜爽欧美精品视频 国产午夜福利在线观看红一片 国产午夜精品理论片 芒果一二三区乱码天天看隐藏入口 国产高清女人高潮对白 91久久精品日日躁
<dl id="r7hd5"><delect id="r7hd5"></delect></dl>
<dl id="r7hd5"><i id="r7hd5"><font id="r7hd5"></font></i></dl><dl id="r7hd5"><i id="r7hd5"><meter id="r7hd5"></meter></i></dl>
<video id="r7hd5"></video><dl id="r7hd5"><delect id="r7hd5"></delect></dl>
<dl id="r7hd5"><delect id="r7hd5"></delect></dl><dl id="r7hd5"></dl>
<video id="r7hd5"></video> <video id="r7hd5"></video><dl id="r7hd5"></dl><dl id="r7hd5"><i id="r7hd5"><meter id="r7hd5"></meter></i></dl>
<dl id="r7hd5"><i id="r7hd5"></i></dl>
<dl id="r7hd5"></dl><dl id="r7hd5"></dl>
<video id="r7hd5"><i id="r7hd5"></i></video><dl id="r7hd5"></dl><dl id="r7hd5"></dl>
<video id="r7hd5"><i id="r7hd5"><delect id="r7hd5"></delect></i></video>
<i id="r7hd5"></i>
<video id="r7hd5"></video>
<dl id="r7hd5"><delect id="r7hd5"></delect></dl>