~q@kM}{dvde~xEk(xxY>Ph){KXtnNLb?M!9d3`+F#wc71llRNb;o!U|A1Qi*?=a zPeEMDFBd(-kuvrY@jd54_BdMRC*N&FNvk7r#%2mBR;&20W5#cC^@+9%rWXPRCkB_x z0$~il1Tya*RYSMz6fj~OOE)+`L|R6$JGsUxb(L&)?*sC=^%$FA9m%Jx{`R_oc+Smr zgwBn5Ob1OlbW8pX1|AdcfzVWgGOK0*-gx-(O`ql~k^WygQjQNNq%h(Qlsac)>bHQv z9l!O>A|Gps4Xi6@U%g&n6c~jcZ3DLHvr@g zw;CN@j?<4!w6Y55Yt*M-6&Lc9pJDAMe^Z?{9ijBK8ir4dq5sMId<~dFjll#)GvjVp zvMXUIGWs0zwS}WW{`Be h}#{2*NpnBOJ9# oisSc0 zoQZ|v^!HF-h=qRsL44w=kkU9a272FQwYAVDDw=>-mya{Rl+9a R9mC=qK3PxWu%tl0%R_UJ2b zl7-+q*R`HI2DLZXwB?!vly4^Tci*In`Bg6%F~QsXHUFJnOF`_wbR^EP+9E^x=KEJ_ z*bz|_g77P8+a2@wFB`!a{~6Z%rPCksLpXj?^Z9ew%w@1*3TkLgo< Rv_piW7Q*H7E2> 7&03jbj-LNMFD3cFF|A+uXpUfTl z-Y N>KAyqX AidmDGmL!`BD3{p1R{6d$Kz--MmRyzMdgX9dO#yW{ zahiouuv @0%&8_JCK9YQTwp= !a=r`5F7xpd-V|(FVY_wt!E5}{o$`Lok8dAW(2v( O~6k!j(x`K+VkAKD*Iz3=Y1hT55Yf}lS_@14o^ zZ<*^2_8@Vo0xooZ5i~4MUsY)r;8fUG6B8 Q7_NPpWe-h<1XMsJLA?8mlyC}D* zuD}01IE&jmg5)hHS8oVV^{tCE8(bB+I-~OzYs!O3bDm2TMittcD>?Wu>n%R(M1|0o zkwg%m1g?~GkKTv6CUg!pe~J<7mK7H)QhQgVjWf`Ry^GE dm2X=}L=? z5$w|n<8tMxp#gQV=2Prp)4F++UVn%}ohC aXj5io%vB7B wD=+7V3hWFwgIXJ>}iT(sd=ou71 ziKqLFa!uX!7Tp>3v{L&5uCy0wZd?QA*p=xCO5XI1VsZmh4tSTpkrtMqbAyF#v;)y! z8nUPv{9gm1W^ =RaK634VBHP;hAHZ_ngDbx z3lES@zF_}Gkss}1M$9bQ@&`@lZeFugKf dU-4w|P5I zZQ{y0a)r>$QJiFNXM_~0FHJ@{r)BEAQe$;_QD|N(`!BQbyo & zD0>%Z!W}X`Bg`S}7nO!kRpkCjYLzC1tY^aU6YWNDp;9m0x&rac3}6^*_hi(?r1Q#y zy9Ox*OT*vUMv~7lMnWKbIZE=jL&$`P9oV_=WNz`n#p+tO3L$RKhx+j}N$(xPd;t;y z@`hpspeSEiweOj84w%D)Xzz3lRbzlgeOtSqEN0SB31smDl68Kz6jWKks1z+0g3o|W zK g$evHDBO^wzGW=qcbKWJrNQk3CYG>{L0$e5y-xT9$h{)mACu- zUbLa{C?ejM1TaHd=kkFfP5M5kZ@oC#+Lh#y )gtz^*J&lkWD zZRvS-fqu97l@?^ 9jg444u;w-R=>Cn|&rr1GGjL~Hb3Gqs7jZ^)xYo{pA za}#9yIohkMi>~pL5PEY}D FG A#4>;1jrqdeAA)^%Wu#UX8v!d*b0`u;=jsMR~-mA z)m}uH2^Vkll^1`0V=UsuSGAB4Uso+N2fSHa_P8;4UaUz(tW+jdvn$xX{d}_ggWRQG zXiNhSqSzv&XB&?ri-andkhsnvW`>eurHf$s9I%hY8}U6t-eq<|gBB4ziKL1E;tBj- zwiX6mzDzrl0sK<3`lUOW{3!@cy{z~-Y|gL#%F }$CZF$;WE*AEgE-~{1QmFIVtY$13yo$#V+ia#81}shJ0+>|yrDUtln-NVV zj&E1SM#oOReB<%jR(Zo+mi^-%K0R@7KBe0`pBr;TI`gdrk_xdycZtJk;t8oXlE6Bx z-{)5;-He?X$ihhDi_rA3j93k;*)%?SG!W1#{qH2%rY!H0KYgAQUH4oY*1J<9k;A+h zAr#Gs-@hVJt91@Pf*8xB>R2O hf5Fb;f@=n7+hVtpI5; z3tXt@S(GZKkH+zBziOpxkn@Z=Yz4;qP{1vvR6H={eB;$x`& =_xnefeZp zz%lcSi4mEc!Uy^hv-bsfP<1ah*30cWT)KQ^Q}|R|Wcj}iHwxtkE^9tOCX2wDI!4gH zWq6bn0q{^THt#S1b?23V%l}vg|8FYe|NAMjl0%V&37!R3R%#Pm ={uO79&71VMT+bP%~9z4uT;Rq)b#$AA#2f*_$rl->;y zqy!WYq`%zn{RiIfhuJy1XP#$wXV31;o=JIZqDxJ|PC-CGK&`K*Wp<~V?<9{5c-IcR z8;HJBfB-XH4T9z=&Yimsv75TFIsw7EOv)=KlDj_n3q9)q0s@*({|R8kuhx}-;NEY2 zE%hhC_ISIHf1g|U&mp2s2mC?8sf0icPJV`&_~Z=X)D$r`S%z}*@_Q-q5^#1QAaiU= zEm@W$_#Q0uGy=bP*HnkGz#Ky7imTk#-3~tFUDU5dT;~U@FCDIitt&=__aB_C*-a^L zcL&z*KA8 G<55Wu>D4LXbP_rig_vAf<-v8IokBzGbM^l`9ZC(@w8M>qG ztLisDUm;ZYsd2Pd#@FK|lZ`j7mdYluGnohWQ*CybGG_&Be*7`6NKt$3Hy($#(Sxl@ z<0Mf@S97%4s@RuDNj-@vVKFzu+jEhwENh0aYf1ES{~OG5+4kncxjn^PO5K%mM`V$z z;ac6b>qFga>(l!MY*F>uL4T`oojuuC>iya`aLM`pze-oH&^*W8uCU11iK8g6-=(|C zZFEjgFPZL&v%;&wo*X;=2a~CXh=LRD{CYp<^1em|tBb P*{}X-_*oA--5%u$Ybq)ozJK}<8gKw^`~Ki4Be1?NY;C7|_9MMK74Lk?s%sZ4 z$NGeN&Z9*z%AH413hwmN%VOK^$`~59UG)TLsqTFiC`_J#a{8Ft7bRjidMg;Uq>JYH z%VDG;_tASuoI=HKgT%EuDtF@Z_UNAdz`Uwwe~YI6iy>;FN__RLfb^juF0 I z$j1+9{t=_%e<=zkZ-wSN*XGN>3fL{eF8m@Rj>}f0SzP)iR2JPBFV6UBT@Qxs9&P-~ z;t=(IZR7)5G#2Cwnc@Z=qJhvN&;susrZPhLT%x6w@ty5Q4ym+J#cfL0j!dUde$wlQ zs9r7_lJCiH;W?M+eNTb5qjhx2iM=AAVHl^%-*({-4TFshCcgh)BcLTZcu57BHBopw zGyBfeuZ^+gSy~_T$MSWZfgSB`Y(Qonk?sn?Hl|j{=`dWb^gu8QXM^Us@>Kj?Ka7B% zR|P8;BshTlZZ#}fGmfq?OUpkT6F|Pv-$+L}txRB_+FYyGt1I*F5mVmTmr@q=yl#Ec zUo`Rgmhao@z?rJ6-|IN$3>0B;b*7I{Tj2eI;j=8&gEM^mo=;kT@x)isVY*y0XbmKn zN_WN4gY|3BaOdKSF6)YJZ>>8ERN9qDC&J?v60(Y~t8(1t79+_(@s5vPy9Sv!$L&b7 zo5Sl?blTTGm%?2iEKGE1#(onxF~tT+;Qv9#f*=|!XA|JI-6U7R-bbVHr7t+9Lpe~7 z#>He#{QofG0w?DbfHsO;$S=5|=S4@qLZN$+&C?FvJ2vE&UTJ-)6Dx|NnxBWVsFxsK zVO)eVlK%8X30BL>KCUbgMH7Gf@^qst;AJhFm;HuRnps`hHCu#Jlw~0)VOwv8J{L+5 zjrv_jclCh@Co~$L5s4Bt2*W&8e|rayyy~jj;CHvj# f1K=u%;V(9i;%7VGb!V`CaCq+_NDD;~Ozdr+(JD|%~xG)n% zCZO~#Y2tKRByQi}h_rvqq%xGKA<(56riq8U2Blfh5-oX!WeDmX)1N(&XB%2-z7{!W z^mQE6s^VTC$cy>2pCX@H^GUH?C%?Q2GmUds!E)Qz{01EN*>?YIssD)6K3RzE79b)z zc(@lJ^Pn&d)hNw>?*DyWrVY^GYI&rURu+N& Jpi{VJ#MS^)3q )U*zjuD4Qz9C2wMa>yQjQuVAz2(nB1R%oxT1kJDL4rh=jca zRf{A$n>SPy jxiyQoPJP9Q)&3YISjiK=2?5wl4SY+YqsKR$#}8ak?QZ(E!o zljGfp7#O(EJ?_?aG982w)ZAobJ!p}Lvm(8&H?YYHXEs_+ep__;+Iyu}4VdRnN6g4_ zl74vpic@IhIK(V*G-x$eZ>OtbtvW_+IkCEYMEuMfDg*JCYAROLhGD3nhCG5%W0wuQ z7?MW6zJj}lT(B)lf5*c8F?CYrNQhZs``2Ky_U=D%&q|3C+4+|XmCVciQ{YCi-;!n= zHGceZ@-t%7XK`jCW~AmO%teoQvdl!AwJ}vvC!P1y%otnNWhEXjl*)Yb6=(}Y>`oio z%e36VzkKWs5I}t92}sXwVIU$md--d)Z~^uEspzPo1byn}-{8iX^Ubxo&vx2A8v&)D z% `)tpPoBFgVKr_w)8pT(?r|Z}GLxRb z1`gP! qK^``{FIf2 obq)W)CBKsJSDiN!%Jb=Vsg;d$;WE-V~|j9B${Fqq!Im7YEc(&-j({Q-lk-I zE)l4G2hPSjCS? mzA592hMA-LU_6o0VUs<(} z=RMtM?~tsXxQ2Zn_s241{);cyr7Shc#i-pyfbl}*#43aL=o=h;bmhP(x8s)476r>P zvS0r)-Xa{*!qEGiem L7AcDE>4p8UTCA@+u6*lMfvr$d|OA3 z+4qkOjGEX}^Y<)?v_9~e6HdEW hMHg^|w~PJi=r zX_aOmJTN*8pd`W3SUh>_b!6rDzEgy>TQJA^s#BbPePpP~Y54`7Evh=~spGamN|o@d zGO)EC#9zSscl%ESu<|)&H>~OqK)gc?srC7U_ZcI}FWSB$De#Z5fG#yJb9@ZQ>`h!g z)vrsiyl;t8N7!Nqbwgcqv<&q_spN=vjL)7z)M$R@n6I_;ncKX5$y;@vWtw(W^ Z z;rwGcd8>gyfhC_U316I9L-%gsRU7X;-^{+0Ba4pwnAW;a4^ a21Rm)ghc28HdH=I3bgG?+0{`rI8hGrqJZRupf4(V%j{D?z!#N$Oybw8A22U4 z)hIutl2qfo>vfLx(U}Nyna)AWeMgd}Yel3eOQFBmfNYrc`c @ZAbpu6r+b&g0f@XQ${Zv^41B8lAS*7LT*>D?a^x-m%Uhb<-F@~ zBi$FC70GJ6d1Jj&lZVPrc^gH>G#njkQPfs)<2W2nuD!Qg#qUbUmmpl&8Gtmfv$3JK z{S>c{q3GC~VOWtwUm+9{c|Sm(@H`UCR=2GsTYxfY?>+1r0b*q9L{J%`8qs{La3M`4 zc2cJgHcRjg_WidVzZ!O{k#;rJ8<8 z&|V^|l!$&qGS^Z?XQ$UnO_q**b+do7OVMUmv$b&(GZwAEzwnY-@u}S7){u#madQq^ z!`3hJ%G$8qq<@&l9zG7#7#EZEsdga<5e|3r==|Af ?$IBh`yUipB zoxdD?%7!(zHS#h0?Ea4Z;V;uUex+7U-UZlL2^yQ!*)Y52i|Z|$5iTF}WczDQQR ;O=`4`yVAQwwt@#j;DQdhomnt@yzYC0n!q#k`t1G3Q&H|GPY9LzcQ( zgiZ1_b;sl!%OAXRXRu8-WBeWPeZM149A)DLwj!;XiXM-+XCoVZ+JDIjoII$^PZCI&-GiH?0T@`LZ0E0EaY!m7=SUF^j1rGysV~0A=o0` z1Z8u)!V#_;IvQ*BZE3u@;3L108i3$CZXOXh>(~}|IsWEeAO7}B8o353pzZ)9Gwp)% z66lD}aWS(g!V!}R(d_PRDq@tvW_h|wRHNo>*t@8M=SNbAJu*C)$Bm#l|0dAUy(Xt% z27bGL^&Zjwm(vaFEZ~Q;(W?4Q(>rt>VSBkM$1SDPbC<*2D>$GDjCvoTqtC&*DM&2{ zvb9aVaCXtnmT|j&Fe)f;HD40h%@mWrKFrJ_eN?VW? `#7RUCb3TvgXzvz*y epwPc7V`FD)&w6q<>O}y3&i?mMaV(P%5L 3dh7a()nm2iD6Milc!ATYf;^QQ zPU@d!K&}7hYYw|!oJl(TR+<3FrY&!&+|2AUR7=k0PK;D@NHX;MarRt#2R+E~iPtHU zRbPn&Y5@K!p)P{|%?p77OL>l%#52Ndbakm4m7GeXYe~?XNM&6}Yifrd{a*I%$L$f< zACjzJX17 BY6(`KoJOOboh%_w?V{s& zY$}=~HQ@QlNnltad;epzXQ>Vl+PAa@)mm2;iS8+sT=X32t BRa&Ex@q?P-QHt=BB4RyPuL$MuGl zQaO57U0fH>pgF#xA5P35p+4QUh0&KBxS|v8Ch-)zCHgk6kPHRBXISU3D~rr`>Ol=G zQ>{VXLm!clv7Z${35v1B;tH}#)NwpV0V={-Z-r??s^G@d)Jvo7wM)EvGGz&0CBE4b zdVH9F!jPrYL6gqT%bp)#D(!tOT~CzHZjrD_XWnz*F_+ac`(p!DrvWIXDRW cOdbb0)pPTBzcV!@Rm{ z*#R7+8WM#|k50MegbSbU2Ixe)Cx>~z{R}ESAc$@9;bN07ZKN0F^JS~#NI;94zbX5? zzWGXpW;da7#)ZdWIdC)a-F%kyNno}Hf7Jnm3Bb<_p%tyff4xhV+42zp?QB T%IYLlJ$7Kp25c|2kK3kl(KxjhJ8+I?pw*@GBv& >)$?kL-0Oz*u{umP^XrWukEVC@W+lM>j?~UOLxvcjs1@hMDBxT8I`O2!b9;> zJ$?JipC1#F1U!fM)bIli;W}!@oJ0v@fSK~0PW_2@|2rooGr(N (a!)2yc(SP`H%#+w5WZ)Z3C4vgJHgv66 +eocx6xNpu zY*=MBL1QKl`QyUH^!PikPtBUBEbGJ^-+w*`6oSN>xkm7er!e|%nAC4i!D+MyDrIY5 zw&5b7-8I>-yc;4oLH{|M%50`@^@K3z?C>9(@LaLjX&`x;cihR#x`2XNpjF4#jkYR$ zJNl9<&!<>14T}offfpRj!jbEVJ2pGo&3Z^tGFwW 8LcMgVd%X2LJpnIPB82@|~Gb-Nm zv|)ia127 _lcO1pgi{juVED-8J; z4Sdqcg4y!o++sk)1EGdh?!YNdH3_bS&iRp$9hcM&)0oTrmDeJ!ottFuX-9pdqRo~# zW%>Dhr%iUe$3bd~t#rJXeZg#l`jE;u)~Hq~pn~7V^yx_;yywM^+stNV#Mgs~pae$o zPRXiCzU%z;!wl4O^@sAW2z+YuQGh{v!f=P^H_VLkM2o}(rlH_al?Q6}H@(ulz6v{W z$4Io5nps792FilJpGe{-bqWXX-m`~R9RnoLWs6-(7D4hKXH;0Xh}R+(0Rr9^0jX$_ zayNS+cQ?#!sP{O+NWZAdZFf-`W6pE{_r`UCJck^xV>4doy<}hGk#wC*A|SlD4Ys<{ zbt@zWJi+@ILVwb2%l}%`Ur`zyqIMdctE@HWa-8C|2M6;`GjvvpG!ghqr#zMQPk6x= zPi3#L7eG9;`#>e4KNalzD@<_lxXSPDcA%I+4boCyw3D;BS7x@2kUwaRC}!#8jbmTn zsKeD3_{jvQlEv^6rr0TO^Ardg>?N17e0(7k95RS7zCxAt4Nda7@nK>5(&~N0V}fsK za`W{5AW#70fm@vM*XQA{ztP4byteupcV0KeyZk9WXRwRu`)6oULy!;oP}=3ATJp-k zxIq3NMO#qkryt$9Oa+U@>V^BPWkExe0x=0Fk3YOMT
R8Ve!H^avNxptryd~$2@9p + + ++ + + + +``` + +在上面代码中,假设你需要展示的内容是`content`,那么你就可以判断当内容有值时展示内容,当内容为空时展示空数据时的占位展示图。效果如下: + +# 3. 组件可选属性 + +该组件除了可以直接使用外,还提供过了一些可选属性供个性化配置,提供可选属性如下: + +| 属性名称 | 描述 | 类型 | 是否必须 | 默认值 | +| :---------: | :------------------: | :----: | :------: | :------: | +| description | 自定义描述内容 | String | 否 | 暂无数据 | +| image | 自定义显示图片的路径 | String | 否 | 默认图片 | +| imageStyle | 自定义显示图片的样式 | Object | 否 | - | + +组件提供了3个可选属性,你可以这样去使用它们: + +- 自定义描述内容 + + ```html ++ + ``` + +- 显示自定义图片 + + ```html + + ``` +  + + + + ```javascript + + ``` +  + +- 自定义显示图片样式 + + ```html + + + + + + ``` + +# 4. 组件代码 + +完整代码请戳☞[Vue-Components-Library/Empty](https://github.com/NLRX/Vue-Components-Library/tree/master/Empty) + +(完) + diff --git a/Empty/index.vue b/Empty/index.vue new file mode 100644 index 0000000..9e976f7 --- /dev/null +++ b/Empty/index.vue @@ -0,0 +1,90 @@ + +++ + + + + \ No newline at end of file diff --git a/ExportExcel/Export2Excel.js b/ExportExcel/Export2Excel.js new file mode 100644 index 0000000..e26831b --- /dev/null +++ b/ExportExcel/Export2Excel.js @@ -0,0 +1,206 @@ +/* eslint-disable */ +require('file-saver'); +import XLSX from 'xlsx' + +function generateArray(table) { + var out = []; + var rows = table.querySelectorAll('tr'); + var ranges = []; + for (var R = 0; R < rows.length; ++R) { + var outRow = []; + var row = rows[R]; + var columns = row.querySelectorAll('td'); + for (var C = 0; C < columns.length; ++C) { + var cell = columns[C]; + var colspan = cell.getAttribute('colspan'); + var rowspan = cell.getAttribute('rowspan'); + var cellValue = cell.innerText; + if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue; + + //Skip ranges + ranges.forEach(function (range) { + if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { + for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); + } + }); + + //Handle Row Span + if (rowspan || colspan) { + rowspan = rowspan || 1; + colspan = colspan || 1; + ranges.push({ + s: { + r: R, + c: outRow.length + }, + e: { + r: R + rowspan - 1, + c: outRow.length + colspan - 1 + } + }); + }; + + //Handle Value + outRow.push(cellValue !== "" ? cellValue : null); + + //Handle Colspan + if (colspan) + for (var k = 0; k < colspan - 1; ++k) outRow.push(null); + } + out.push(outRow); + } + return [out, ranges]; +}; + +function datenum(v, date1904) { + if (date1904) v += 1462; + var epoch = Date.parse(v); + return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); +} + +function sheet_from_array_of_arrays(data, opts) { + var ws = {}; + var range = { + s: { + c: 10000000, + r: 10000000 + }, + e: { + c: 0, + r: 0 + } + }; + for (var R = 0; R != data.length; ++R) { + for (var C = 0; C != data[R].length; ++C) { + if (range.s.r > R) range.s.r = R; + if (range.s.c > C) range.s.c = C; + if (range.e.r < R) range.e.r = R; + if (range.e.c < C) range.e.c = C; + var cell = { + v: data[R][C] + }; + if (cell.v == null) continue; + var cell_ref = XLSX.utils.encode_cell({ + c: C, + r: R + }); + + if (typeof cell.v === 'number') cell.t = 'n'; + else if (typeof cell.v === 'boolean') cell.t = 'b'; + else if (cell.v instanceof Date) { + cell.t = 'n'; + cell.z = XLSX.SSF._table[14]; + cell.v = datenum(cell.v); + } else cell.t = 's'; + + ws[cell_ref] = cell; + } + } + if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); + return ws; +} + +function Workbook() { + if (!(this instanceof Workbook)) return new Workbook(); + this.SheetNames = []; + this.Sheets = {}; +} + +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; +} + +export function export_table_to_excel(id) { + var theTable = document.getElementById(id); + var oo = generateArray(theTable); + var ranges = oo[1]; + + /* original data */ + var data = oo[0]; + var ws_name = "SheetJS"; + + var wb = new Workbook(), + ws = sheet_from_array_of_arrays(data); + + /* add ranges to worksheet */ + // ws['!cols'] = ['apple', 'banan']; + ws['!merges'] = ranges; + + /* add worksheet to workbook */ + wb.SheetNames.push(ws_name); + wb.Sheets[ws_name] = ws; + + var wbout = XLSX.write(wb, { + bookType: 'xlsx', + bookSST: false, + type: 'binary' + }); + + saveAs(new Blob([s2ab(wbout)], { + type: "application/octet-stream" + }), "test.xlsx") +} + +export function export_json_to_excel({ + header, + data, + filename, + autoWidth = true, + bookType= 'xlsx' +} = {}) { + /* original data */ + filename = filename || 'excel-list' + data = [...data] + data.unshift(header); + var ws_name = "SheetJS"; + var wb = new Workbook(), + ws = sheet_from_array_of_arrays(data); + + if (autoWidth) { + /*设置worksheet每列的最大宽度*/ + const colWidth = data.map(row => row.map(val => { + /*先判断是否为null/undefined*/ + if (val == null) { + return { + 'wch': 10 + }; + } + /*再判断是否为中文*/ + else if (val.toString().charCodeAt(0) > 255) { + return { + 'wch': val.toString().length * 2 + }; + } else { + return { + 'wch': val.toString().length + }; + } + })) + /*以第一行为初始值*/ + let result = colWidth[0]; + for (let i = 1; i < colWidth.length; i++) { + for (let j = 0; j < colWidth[i].length; j++) { + if (result[j]['wch'] < colWidth[i][j]['wch']) { + result[j]['wch'] = colWidth[i][j]['wch']; + } + } + } + ws['!cols'] = result; + } + + /* add worksheet to workbook */ + wb.SheetNames.push(ws_name); + wb.Sheets[ws_name] = ws; + + var wbout = XLSX.write(wb, { + bookType: bookType, + bookSST: false, + type: 'binary' + }); + saveAs(new Blob([s2ab(wbout)], { + type: "application/octet-stream" + }), `${filename}.${bookType}`); +} diff --git a/ExportExcel/README.md b/ExportExcel/README.md new file mode 100644 index 0000000..74d840f --- /dev/null +++ b/ExportExcel/README.md @@ -0,0 +1,120 @@ +# 介绍 + +这是一个可以将页面中的表格数据导出为`Excel`文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成`Excel`文件。 + +# 使用方法 + +由于封装该组件内部引用了`xlsx.js`,`file-saver.js`和`elementUI`,因此在使用该组件时,请先安装如下依赖: + +```shell +npm install xlsx file-saver element-ui --save +``` + +安装好依赖后,只需将该组件文件夹`ExportExcel`导入到现有项目中即可使用。 + + +# 使用示例 + +```html + ++++ +
{{description}}
+++ + + + +``` + +# 选项 + +| 属性 | 描述 | 类型 | 是否必须 | +| :------: | :------------------: | :---: | :------: | +| list | 由后端返回的表格数据 | Array | 是 | +| tHeader | 导出的Excel文件表头标题 | Array | 是 | +| tValue | 要将表格数据中的哪些字段作为数据导出至Excel,与表头一一对应 | Array | 是 | +| filename | 导出的Excel文件名,默认为“导出数据.xlsx” | String | 否 | + +# 选项说明 + +**关于选项中的`tHeader`和`tValue`说明如下:** + +例如将如下表格数据导出成Exlcel: + + + +其中表头数据为: + + + +所以`tHeader`为: + +```javascript +tHeader:['Id', '告警类型', '告警内容', '告警时间(段)', '告警次数'] +``` + +后端返回的表格数据`list`为: + +```json +[ + { + "id":1, + "type":"", + "content":"", + "time":"", + "count":"", + }, + { + "id":2, + "type":"", + "content":"", + "time":"", + "count":"", + }, + //.... +] +``` + +其中: + +- list中的id------->表头的ID + +- list中的type------->表头的'告警类型' + +- list中的content------->表头的'告警内容' + +- list中的time------->表头的'告警时间(段)' + +- list中的count------->表头的'告警次数' + +所有`tValue`为: + +```javascript +tValue:['id', 'type', 'content', 'time', 'count'] +``` + + + +# 效果图 + + + + +# 组件代码 + +完整代码请戳☞[Vue-Components-Library/ExportExcel](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/ExportExcel) + +(完) \ No newline at end of file diff --git a/ExportExcel/index.vue b/ExportExcel/index.vue new file mode 100644 index 0000000..c01fce3 --- /dev/null +++ b/ExportExcel/index.vue @@ -0,0 +1,58 @@ + ++ 导出 Excel + + + + + diff --git a/JTopoInVue/App.vue b/JTopoInVue/App.vue new file mode 100644 index 0000000..4156fb4 --- /dev/null +++ b/JTopoInVue/App.vue @@ -0,0 +1,14 @@ + +++ + + + diff --git a/JTopoInVue/README.md b/JTopoInVue/README.md new file mode 100644 index 0000000..f10f70c --- /dev/null +++ b/JTopoInVue/README.md @@ -0,0 +1,44 @@ +# 1.前言 + +[jTopo(Javascript Topology library)]([http://www.jtopo.com](http://www.jtopo.com/)) 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。其体积小,性能优异,由一群开发爱好者来维护。唯一感觉不足的是它是一个纯`js`库,没有像使用`ES6`语法,不能像模块化开发那样使用`import`导入, + +由于博主的项目是使用vue-cli搭建的模块化开发项目,想要使用第三方库最好的方式是通过`npm install xxx`安装,然后在项目里`import xxx`来使用。但是在`JTopo`官网上并没有发现有该库的`npm`包,在`www.npmjs.com`上搜索`JTopo`,虽然找到了该库的`npm`包,但是这些包都是由一些个人开发者通过修改源码上传的,并且年限过久,博主担心直接使用的话可能会有一些诡异的`bug`,所以博主研究了一下,如何在`vue-cli`项目中直接导入第三方`js`库,幸运的是,很快就找到了办法,并且很容易哈,现将方法记录下来,并提供demo,供大家参考。 + +# 2.解决办法 + +我们知道,无论是什么项目,最终通过打包后跑在浏览器上的肯定是一个`html`文件,在`Vue`中就是根目录下的`index.html`,在该文件中会将`webpack`打包后的`build.js`文件通过` + ++