vue-electron中修改表格内容并修改样式（electron结合vue）新鲜出炉

<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=https://www.jb51.net/article/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>