excel-builder-vanilla/packages/demo/src/getting-started.html at 8658f495c60f924565d60c2fad85172cfc71590c · ghiscoding/excel-builder-vanilla · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="row mb-2">
  <div class="col-md-12 title-desc">
    <h2 class="bd-title">Getting Started</h2>
  </div>
</div>

<div class="content-text">
  <h3>Download</h3>
  <hr>

  <section>
    <h5>GitHub <i class="fa fa-link"></i></h5>
    <p><a href="https://github.com/ghiscoding/excel-builder-vanilla">https://github.com/ghiscoding/excel-builder-vanilla</a></p>
  </section>

  <section>
    <h5>CDN</h5>
    <p>
      <a href="https://www.jsdelivr.com/" target="__blank">jsDelivr</a>
      graciously provide CDNs for many JavaScript libraries including Excel-Builder-Vanilla. Just use the following CDN links.
    </p>

    <div style="background: #f7f7f7; padding: 10px">
      <pre>
&lt;script <span style="color:#207eb1">type</span>=&quot;<span style="color:#f06605">module</span>&quot;&gt;
  // ESM Module import
  <span style="color:#cf222e">import</span> excelBuilderVanilla <span style="color:#cf222e">from</span> <span style="color:#0a3069">'https://cdn.jsdelivr.net/npm/excel-builder-vanilla@5.0.0/+esm'</span>;
&lt;/script&gt;
</pre>
    </div>
  </section>

  <section>
    <h5>NPM</h5>
    <p>Install and manage Excel-Builder-Vanilla JavaScript using NPM.</p>

    <div style="background: #f7f7f7; padding: 10px">
      <pre>$ npm install excel-builder-vanilla</pre>
    </div>
  </section>

  <h5>
    ESM <code>import from</code>
  </h5>
  <p>The library provides both CommonJS or ESM, see the example below:</p>
  <div style="background: #f7f7f7; padding: 10px">
    <pre>
// ESM
<span style="color:#cf222e">import</span> { createWorkbook } <span style="color:#cf222e">from</span> <span style="color:#00265f">'excel-builder-vanilla'</span>;

// use it
const artistWorkbook = <span style="color:#ce8601">createWorksheet</span>(); // or new Workbook();
const albumList = <span style="color:#009db2">artistWorkbook</span>.<span style="color:#ce8601">createWorksheet</span>({ <span style="color:#003c44">name</span>: <span style="color:#aa8202">'Artists'</span> })</span>;
<span style="color:#009db2">albumList</span>.<span style="color:#ce8601">setData</span>(this.originalData);
</pre>

    <h5>Legacy Versions</h5>
    <p>
      The project now ships as ESM-Only, if you still wish to use the legacy <code>&lt;script&gt;</code> standalone IIFE Script on the
      <code>window</code> object, then use the previous 4.x version.
    </p>
  </div>
</div>