excel-builder-vanilla/packages/demo/src/examples/example-standalone-iife.html at addbca1db26f6a0637e584c3aaa022e77c604a7b · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>Standalone example 1: Basic Grid</title>
  </head>

  <body>
    <h2>Excel-Builder-Vanilla</h2>
    <h5>Standalone JS (IIFE)</h5>

    <div>
      <div class="mb-2">
        <button class="btn btn-success btn-sm" id="export"><i class="fa fa-download"></i>Excel Export</button>
      </div>

      <div class="row">
        <div class="table-container col-sm-8">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Artist</th>
                <th scope="col">Album (hidden column)</th>
                <th scope="col">Price</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Buckethead</td>
                <td>Albino Slug</td>
                <td>8.99</td>
              </tr>
              <tr>
                <td>Buckethead</td>
                <td>Electric Tears</td>
                <td>13.99</td>
              </tr>
              <tr>
                <td>Buckethead</td>
                <td>Colma</td>
                <td>11.34</td>
              </tr>
              <tr>
                <td>Crystal Method</td>
                <td>Vegas</td>
                <td>10.54</td>
              </tr>
              <tr>
                <td>Crystal Method</td>
                <td>Tweekend</td>
                <td>10.64</td>
              </tr>
              <tr>
                <td>Crystal Method</td>
                <td>Divided By Night</td>
                <td>8.99</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fflate@0.8.2/umd/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/excel-builder-vanilla@3.0.1/dist/excel-builder.iife.js"></script>

    <script>
    function downloader(options) {
      // when using IE/Edge, then use different download call
      if (typeof navigator.msSaveOrOpenBlob === 'function') {
        navigator.msSaveOrOpenBlob(options.blob, options.filename);
      } else {
        // this trick will generate a temp <a /> tag
        // the code will then trigger a hidden click for it to start downloading
        const link = document.createElement('a');
        const url = URL.createObjectURL(options.blob);

        if (link && document) {
          link.textContent = 'download';
          link.href = url;
          link.setAttribute('download', options.filename);

          // set the visibility to hidden so there is no effect on your web-layout
          link.style.visibility = 'hidden';

          // this part will append the anchor tag, trigger a click (for download to start) and finally remove the tag once completed
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      }
    }

    function exportExcel() {
      const originalData = [
        ['Artist', 'Album', 'Price'],
        ['Buckethead', 'Albino Slug', 8.99],
        ['Buckethead', 'Electric Tears', 13.99],
        ['Buckethead', 'Colma', 11.34],
        ['Crystal Method', 'Vegas', 10.54],
        ['Crystal Method', 'Tweekend', 10.64],
        ['Crystal Method', 'Divided By Night', 8.99],
      ];
      const artistWorkbook = new window.ExcelBuilder.Workbook();
      const albumList = artistWorkbook.createWorksheet({ name: 'Artists' });
      albumList.setData(originalData);
      artistWorkbook.addWorksheet(albumList);

      new window.ExcelBuilder.createExcelFile(artistWorkbook, { type: 'blob' }).then(excelBlob => {
        const downloadOptions = {
          filename: 'Artist WB.xlsx',
          format: 'xlsx',
        };

        // start downloading but add the Blob property only on the start download not on the event itself
        downloader({ ...downloadOptions, blob: excelBlob, data: albumList.data });
      });
    }

    document.querySelector('button#export').addEventListener('click', () => {
      exportExcel();
    });
    </script>
  </body>
</html>