vue-electron中修改表格內(nèi)容并修改樣式

更新時(shí)間：2023年05月15日 09:03:28 作者：霧戀

本文主要介紹了vue-electron中修改表格內(nèi)容并修改樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求

將表格導(dǎo)入并向其添加內(nèi)容，然后導(dǎo)出表格，且表格樣式（一般是值寬高合并顏色等）不能改變。

技術(shù)

electron
xlsx
xlsx-style
node-xlsx

yarn add xlsx
yarn add xlsx-style
yarn add node-xlsx

xlsx-style

xlsx-style 的一些源碼修改是根據(jù)網(wǎng)上一些博主的文章來的。如下所示：

使用xlsx-style 的時(shí)候要注意，使用的是會(huì)報(bào)錯(cuò)誤，所以，我們需要改他的源碼，下面是正確的修改方式，代碼如下（示例）

# 第一步 修改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環(huán)境），然對(duì)list數(shù)據(jù)里面的表格進(jìn)行內(nèi)容的修改以及填充，修改內(nèi)容以后就將其樣式調(diào)整以及轉(zhuǎn)換數(shù)據(jù)類型并下載

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 將樣式修改后的表格轉(zhuǎn)為blob格式
xlsxAddStyle 修改樣式

其他的屬性大家可以看文檔即可看明白，我只能大家說一下三個(gè)自認(rèn)為比較重要的東西

1."!cols"（代碼中：sheet["!cols"]）= 指每列單元格一列的寬度，按先后順序排列
2."!rows"（代碼中：sheet["!rows"]）= 指每行單元的一行的高度，按先后順序排列
3."!merges"（代碼中：sheet["!merges"]）= 指合并；沒有先后順序。s：開始 e：結(jié)束 r：列 c：行

以上三種都是可以讓用戶自己控制的屬性，至于其他的就需要你們根據(jù)自己的需求進(jìn)行調(diào)整了

在修改樣式中我們會(huì)看到element一個(gè)變量；他們可以去打印這個(gè)變量查看其中的屬性；你們可以到時(shí)里面有許多樣式結(jié)構(gòu)，你只需要根據(jù)自己想要的去修改即可。

<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); // 創(chuàng)建blob地址
? ? ? }
? ? ? const aLink = document.createElement("a");
? ? ? aLink.href = urlA;
? ? ? ?// 2.直接使用自定義文件名,設(shè)置下載文件名稱
? ? ? aLink.setAttribute('download', saveName )
? ? ? document.body.appendChild(aLink)
? ? ? // 模擬點(diǎn)擊下載
? ? ? aLink.click()
? ? ? // 移除改下載標(biāo)簽
? ? ? document.body.removeChild(aLink);
? ? },
? ? // 轉(zhuǎn)為blob文件
? ? sheet2blob(sheet, sheetName) {
? ? ? var sheetNameS = sheetName || "sheet1";
? ? ? var workbook = {
? ? ? ? SheetNames: [sheetNameS],
? ? ? ? Sheets: {},
? ? ? };
? ? ? workbook.Sheets[sheetNameS] = sheet;
? ? ? // 生成excel的配置項(xiàng)
? ? ? var wopts = {
? ? ? ? bookType: "xlsx", // 要生成的文件類型
? ? ? ? bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會(huì)下降，但在低版本IOS設(shè)備上有更好的兼容性
? ? ? ? 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" });
? ? ? // 字符串轉(zhuǎn)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);
? ? ? // 單元格外側(cè)有框線
? ? ? const borderAll = {
? ? ? ? top: { style: "thin" },
? ? ? ? bottom: { style: "thin" },
? ? ? ? left: { style: "thin" },
? ? ? ? right: { style: "thin" },
? ? ? };
? ? ? // 單元格外側(cè)無框線
? ? ? 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", // 所有單元格右對(duì)齊
? ? ? ? ? ? ? vertical: "center", // 所有單元格垂直居中
? ? ? ? ? ? ? wrapText: true, //自動(dòng)換行 需申報(bào)物品
? ? ? ? ? ? };
? ? ? ? ? ? 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; // 加粗
? ? ? ? ? ? }
? ? ? ? ? ? // 標(biāo)題的樣式
? ? ? ? ? ? if (index === 2) {
? ? ? ? ? ? ? // element.s.font.bold = true; // 加粗
? ? ? ? ? ? ? // element.s.fill.fgColor = { rgb: "FFCCFFFF" };
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? // 表頭的樣式設(shè)置
? ? ? 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行 - 實(shí)際 18(索引)
? ? ? ? { hpx: 34 },
? ? ? ? { hpx: 46 },
? ? ? ? { hpx: 87 },
? ? ? ];
? ? ? // r：列 c：行 s：開始 e：結(jié)束
? ? ? 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>

到此這篇關(guān)于vue-electron中修改表格內(nèi)容并修改樣式的文章就介紹到這了,更多相關(guān)vue-electron修改表格樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: