xlsx-preview/dist/xlsxPreview.min.js

Preview the .xlsx in the browser, convert to HTML with styles.

var xlsxPreview;(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>L,xlsx2Html:()=>M});const n=ExcelJS;function o(t){let e="";for(const n of t){let t=n.toString(16);for(;t.length<2;)t="0"+t;e+=t}return e}const r=function(){const t=crypto.getRandomValues(new Uint8Array(8)),e=t.slice(0,4),n=t.slice(4);return`${o(e)}-${o(n)}`}(),l=`excel-sheets-${r}`,s=`table-${r}`,i=`tbody-${r}`,c=`sheet-${r}`,a=`sheet-toggle-bar-${r}`,f=`locate-btns-x-${r}`,d=`l-btn-${r}`,u=`toggle-btns-x-${r}`,$=`t-btn-${r}`;let h=20,g=16;const b=`\nfunction toggleBtnEventBind() {\n  document.querySelector('.${u}').addEventListener('click',e => {\n    const target = e.target;\n    if(target.classList.contains('${$}')) {\n      const index = target.dataset.index;\n      setActiveByIndex(index);\n    }\n  })\n}\n`,p=`\nconst sheetBtnOffsetMap = (function calcSheetToggleBtnOffset() {\n  const result = [];\n  const btns = document.querySelectorAll(".${$}");\n  btns.forEach((ele, idx) => {\n    result[idx] = ele.offsetLeft;\n  });\n  return result;\n})();\n`,x=`\nfunction setActiveByIndex(index) {\n  document.querySelector('.${$}.active').classList.remove('active');\n  document.querySelector('.${c}.active').classList.remove('active');\n  document.querySelector('.${$}[data-index="' + index + '"]').classList.add("active");\n  document.querySelector('.${c}[data-index="' + index + '"]').classList.add("active");\n}\n`,y=`\nlet offsetIndex = 0;\nfunction locateBtnEventBind() {\n  document.querySelector('.${f}').addEventListener('click', e => {\n    const target = e.target;\n    if (target.classList.contains('${d}')) {\n      const toggleBtnX = document.querySelector('.${u}');\n      switch (target.id) {\n        case 'first-${r}':\n          toggleBtnX.scrollTo({ left: 0 });\n          offsetIndex = 0;\n          break;\n        case 'last-${r}':\n          toggleBtnX.scrollTo({ left: sheetBtnOffsetMap[sheetBtnOffsetMap.length - 1] })\n          offsetIndex = sheetBtnOffsetMap.length - 1;\n          break;\n        case 'prev-${r}':\n          toPrevOffsetIndex(toggleBtnX);\n          break;\n        case 'next-${r}':\n          if (offsetIndex === sheetBtnOffsetMap.length - 1) return;\n          toggleBtnX.scrollTo({ left: sheetBtnOffsetMap[++offsetIndex] });\n          break;\n        default:\n          break;\n      }\n    }\n  })\n}\n`,v={};function w(t,e){if(v[t])return`<tr>${e}${v[t]}</tr>`;let n="";for(let e=1;e<=t;e++)n+="<td></td>";return v[t]=n,`<tr>${e}${n}</tr>`}function m(t,e){const{rows:n,cols:o}=e,{tl:r,br:l}=t,s=(r.col-r.nativeCol)*o[Math.ceil(r.col)],i=(r.row-r.nativeRow)*n[Math.ceil(r.row)];let c=0;for(let t=r.nativeCol;t>=0;t--)c+=o[t];let a=0;for(let t=r.nativeRow;t>=0;t--)a+=n[t];const f=c+s,d=a+i,u=(l.col-l.nativeCol)*o[Math.ceil(l.col)],$=(l.col-l.nativeCol)*n[Math.ceil(l.row)];let h=0;for(let t=l.nativeCol;t>=0;t--)h+=o[t];let g=0;for(let t=l.nativeRow;t>=0;t--)g+=n[t];return{left:f,top:d,width:h+u-f,height:g+$-d}}function B(t,e,n){if(t.width)return t;const{cols:o}=n,{tl:r,br:l}=e,s=(l.nativeColOff-r.nativeColOff)/1e4,i=r.nativeColOff/1e4;let c=0;for(let t=r.nativeCol;t>=0;t--)c+=o[t];const a=c+i;return Object.assign(Object.assign({},t),{left:a,width:s})}function O(t){let e="";const{bold:n,italic:o,family:r,name:l,size:s,underline:i,color:c}=t;return n&&(e+="font-weight: bold;"),o&&(e+="font-style: italic;"),r&&(e+=`font-family: ${l};`),s&&(e+=`font-size: ${s}px;`),i&&(e+="text-decoration: underline;"),c&&c.argb&&(e+=`color: ${k(c.argb)};`),e}function k(t){const{a:e,r:n,g:o,b:r}=function(t){if(8!==t.length)throw"This is not a standard argb string.";const e=[];for(let n=0;n<4;n++)e.push(t.substr(2*n,2));const[n,o,r,l]=e.map((t=>parseInt(t,16)));return{a:n,r:o,g:r,b:l}}(t);return`rgba(${n},${o},${r},${e/255})`}function S(t){let e=null;if(t.isMerged){if(t.master!==t)return"";e=function(t){if(!t.isMerged||t.master!==t)return null;const{row:e,col:n}=t.fullAddress;let o,r=e+1;do{o=t.worksheet.findCell(r++,n)}while(o&&o.master===t);let l=n+1;o=void 0;do{o=t.worksheet.findCell(e,l++)}while(o&&o.master===t);const s={};return r-e>1&&(s.row=r-e-1),l-n>1&&(s.col=l-n-1),s}(t)}let o=function(t){const{type:e,value:o}=t;switch(e){case n.ValueType.Null:return"";case n.ValueType.Hyperlink:return function(t){return`<a href="${t.hyperlink}" target="_blank">${t.text}</a>`}(o);case n.ValueType.RichText:return function(t){const e=t.richText;let n="";for(const t of e){let e="";t.font&&(e=O(t.font)),n+=e?`<span style="${e}">${t.text}</span>`:`<span>${t.text}</span>`}return n}(o);case n.ValueType.Formula:return function(t){return"0.00%"===t.numFmt?(100*t.result).toFixed(2)+"%":t.result||""}(t);case n.ValueType.Date:return function(t){return t.toString()}(o);default:return o||""}}(t),r="";e&&(e.col&&(r+=` colspan="${e.col}"`),e.row&&(r+=` rowspan="${e.row}"`));let l="";return t.font&&(l+=O(t.font)),t.alignment&&(l+=function(t){let e="";const{horizontal:n,vertical:o,indent:r,readingOrder:l}=t;return n&&(e+=`text-align: ${n};`),o&&(e+=`vertical-align: ${o};`),r&&(e+=`text-indent: ${r};`),l&&(e+=`direction: ${l};`),e}(t.alignment)),t.fill&&(l+=function(t){const{type:e}=t;if("pattern"===e){const{fgColor:e,bgColor:n}=t;if(e&&e.argb)return`background-color: ${k(e.argb)};`;if(n&&n.argb)return`background-color: ${k(n.argb)};`}return""}(t.fill)),l&&(r+=` style="${l}"`),`<td${r}>${o}</td>`}function C(t){return e=this,n=void 0,l=function*(){const e={rows:[],cols:[]},n={};t.eachRow(((t,e)=>{n[e]=t}));const o=t.lastRow&&t.lastRow.number||0,l=Math.max(o,h),c=t.lastColumn&&t.lastColumn.number||0,a=Math.max(c,g),{resultRows:f,rowsSpan:d}=function(t,e,n,o){let r="";const l=[];for(let s=1;s<=e;s++){let e="";const i=`<td class="order order-row">${s}</td>`;let c;if(t[s]){const{height:r}=t[s];let l="";for(let t=1;t<=n;t++){const e=o.findCell(s,t);l+=e?S(e):"<td></td>"}let a="";r?(a+=` style="height:${r}px;"`,c=r):c=24,e+=`<tr${a}>${i}${l}</tr>`}else c=24,e+=w(n,i);r+=e,l[s]=c}return{resultRows:r,rowsSpan:l}}(n,l,a,t);e.rows=[24,...d];const{sheetWidth:u,orderCol:$,colStyles:b,colsSpan:p}=function(t,e){const n=e.properties.defaultColWidth||9;let o=0,r='<td class="order order-row"></td>',l="";const s=[];for(let c=1;c<=t;c++){const t=e.getColumn(c);if(r+=`<td class="order order-col index-${c}">${t.letter}</td>`,t.width){const e=72*t.width/n;s[c]=e,o+=e,l+=`.${i} td.index-${c} { width: ${e}px; }`}else o+=72,s[c]=72}return{sheetWidth:o,orderCol:r,colStyles:l,colsSpan:s}}(a,t);e.cols=[32,...p];const x=t.views.some((t=>!t.showGridLines))?`.${i}.${i} td:not(.order) { border: none; }`:"";let y=`<body class="embed-body-${r}">\n        <table class="${s}">\n            <tbody class="${i}">${$+f}</tbody>\n        </table>\n    </body>`;const v=`.${s} { width: ${u}px; } ${x}`,O=yield function(t,e){return n=this,o=void 0,l=function*(){const n=t.getImages();let o="";for(const r of n){let n=m(r.range,e);const{left:l,top:s,width:i,height:c}=B(n,r.range,e),a=`position: absolute; left: ${l}px; top: ${s}px; width: ${i}px; height: ${c}px;`,f=t.workbook.getImage(r.imageId),d=`image/${f.extension}`;f.base64?o+=`<img src="${f.base64}" style="${a}" />`:f.buffer&&(o+=`<object type="${d}" data="${URL.createObjectURL(new Blob([f.buffer],{type:d}))}" style="${a}"></object>`)}return o},new((r=void 0)||(r=Promise))((function(t,e){function s(t){try{c(l.next(t))}catch(t){e(t)}}function i(t){try{c(l.throw(t))}catch(t){e(t)}}function c(e){var n;e.done?t(e.value):(n=e.value,n instanceof r?n:new r((function(t){t(n)}))).then(s,i)}c((l=l.apply(n,o||[])).next())}));var n,o,r,l}(t,e);return y+=O,y+=`<style>${v}${b}</style>`,y+=`\n    <style>\n      .embed-body-${r} { margin: 0; padding: 0; }\n      .${s} { border-collapse: collapse; table-layout: fixed; }\n      .${i} { border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }\n      .${i} td { border-left: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0; width: 72px; height: 24px; text-overflow: ellipsis; overflow: hidden; }\n      .${i} td.order { color: #333; text-align: center; background: #b6d9fb; }\n      .${i} td.order-row { width: 32px; }\n    </style>`,y},new((o=void 0)||(o=Promise))((function(t,r){function s(t){try{c(l.next(t))}catch(t){r(t)}}function i(t){try{c(l.throw(t))}catch(t){r(t)}}function c(e){var n;e.done?t(e.value):(n=e.value,n instanceof o?n:new o((function(t){t(n)}))).then(s,i)}c((l=l.apply(e,n||[])).next())}));var e,n,o,l}function M(t,e){return o=this,s=void 0,v=function*(){var o;let s;if((null==e?void 0:e.minimumRows)&&((o=e.minimumRows)<20&&console.warn("setMinimumNumberRows: count less then DEFAULT_NUMBER_ROWS."),h=o),(null==e?void 0:e.minimumCols)&&function(t){t<16&&console.warn("setMinimumNumberCols: count less then DEFAULT_NUMBER_COLS."),g=t}(e.minimumCols),t instanceof Blob)s=yield t.arrayBuffer();else{if(!(t instanceof ArrayBuffer))throw"xlsx2Html(data, options): The parameter data can only be passed ArrayBuffer, Blob or File type";s=t}const i=new n.Workbook;yield i.xlsx.load(s);const v=i.worksheets.length,w=[];for(let t=0;t<v;t++){const e=yield C(i.worksheets[t]);w.push(e)}if(!0===(null==e?void 0:e.separateSheets))return"arrayBuffer"===e.output?w.map((t=>R(t))):w;const m=function(t,e){let n="",o="";for(let r=0;r<t.length;r++){const l="text/html",s=URL.createObjectURL(new Blob([t[r]],{type:l})),i=0===r?" active":"";n+=`<object class="${c}${i}" data-index="${r}" type="${l}" data="${s}"></object>`,o+=`<button class="${$}${i}" data-index="${r}">${e[r].name}</button>`}return n+=`<div class="${a}"><div class="${f}">\n    <button class="${d}" id="first-${r}">⇤</button>\n    <button class="${d}" id="prev-${r}">←</button>\n    <button class="${d}" id="next-${r}">→</button>\n    <button class="${d}" id="last-${r}">⇥</button>\n  </div><div class="${u}">${o}</div></div>`,n+=`\n    <style>\n      body { margin-bottom: 0; }\n      .${l} { position: relative; height: 100%; }\n      .${c} { display: none; width: 100%; height: calc(100% - 30px); }\n      .${c}.active { display: block; }\n      .${a} { position: fixed; left: 0px; bottom: 0px; width: 100%; display: flex; }\n      .${f} { display: flex; algin-items: center; margin-right: 1px; }\n      .${d} { height: 30px; border: none; }\n      .${d}:active { background: #fff; }\n      .${u} { position: relative; flex: 1; overflow: hidden; white-space: nowrap; }\n      .${$} { height: 30px; padding: 0 15px; border: none; box-shadow: 1px 0 2px #ccc; }\n      .${$}.active { border-bottom: 2px solid; background: #fff; }\n    </style>\n  <script>\n    ${b}\n    ${p}\n    ${x}\n    \nfunction toPrevOffsetIndex(toggleBtnX) {\n  if (offsetIndex === 0) return;\n  const scrollLeft = toggleBtnX.scrollLeft;\n  const scrollWidth = toggleBtnX.scrollWidth;\n  const offsetWidth = toggleBtnX.offsetWidth;\n  const maxOffset = scrollWidth - offsetWidth;\n  let idx = offsetIndex - 1;\n  while (idx >= 0) {\n    let cur = sheetBtnOffsetMap[idx];\n    if (cur < maxOffset) {\n      toggleBtnX.scrollTo({ left: cur });\n      offsetIndex = idx;\n      break;\n    }\n    idx--;\n  }\n}\n\n    ${y}\n    window.onload = function() {\n      toggleBtnEventBind();\n      locateBtnEventBind();\n    }\n  <\/script>`,`<div class="${l}">${n}</div>`}(w,i.worksheets);return"arrayBuffer"===(null==e?void 0:e.output)?R(m):m},new((i=void 0)||(i=Promise))((function(t,e){function n(t){try{l(v.next(t))}catch(t){e(t)}}function r(t){try{l(v.throw(t))}catch(t){e(t)}}function l(e){var o;e.done?t(e.value):(o=e.value,o instanceof i?o:new i((function(t){t(o)}))).then(n,r)}l((v=v.apply(o,s||[])).next())}));var o,s,i,v}function R(t){return new Blob([t],{type:"text/html"}).arrayBuffer()}const L={xlsx2Html:M};xlsxPreview=e})();
//# sourceMappingURL=xlsxPreview.min.js.map