From 596a1c6bb9f319ba888b4d6a03b2169a1f37141a Mon Sep 17 00:00:00 2001
From: wenzhixin <wenzhixin2010@gmail.com>
Date: Mon, 13 Apr 2026 00:46:35 +0800
Subject: [PATCH] Add export extension test HTML pages for Cypress tests

- Add 12 test HTML files for export extension options
- Test showExport, exportTypes, exportDataType, exportFooter, etc.
- Test column options: forceExport, forceHide
- Test events: export-started, export-saved
- Test methods: exportTable()
- Test exportOptions.fileName as function
---
 .../extensions/export/export-customTypes.html | 38 +++++++++++++++
 .../export/export-dataType-all.html           | 41 ++++++++++++++++
 .../export/export-dataType-selected.html      | 39 +++++++++++++++
 .../extensions/export/export-events.html      | 44 +++++++++++++++++
 .../export/export-fileName-function.html      | 41 ++++++++++++++++
 .../extensions/export/export-footer.html      | 47 +++++++++++++++++++
 .../extensions/export/export-forceExport.html | 38 +++++++++++++++
 .../extensions/export/export-forceHide.html   | 38 +++++++++++++++
 .../extensions/export/export-method.html      | 41 ++++++++++++++++
 .../export/export-multipleTypes.html          | 37 +++++++++++++++
 .../extensions/export/export-showExport.html  | 37 +++++++++++++++
 .../extensions/export/export-singleType.html  | 37 +++++++++++++++
 12 files changed, 478 insertions(+)
 create mode 100644 for-tests/extensions/export/export-customTypes.html
 create mode 100644 for-tests/extensions/export/export-dataType-all.html
 create mode 100644 for-tests/extensions/export/export-dataType-selected.html
 create mode 100644 for-tests/extensions/export/export-events.html
 create mode 100644 for-tests/extensions/export/export-fileName-function.html
 create mode 100644 for-tests/extensions/export/export-footer.html
 create mode 100644 for-tests/extensions/export/export-forceExport.html
 create mode 100644 for-tests/extensions/export/export-forceHide.html
 create mode 100644 for-tests/extensions/export/export-method.html
 create mode 100644 for-tests/extensions/export/export-multipleTypes.html
 create mode 100644 for-tests/extensions/export/export-showExport.html
 create mode 100644 for-tests/extensions/export/export-singleType.html

diff --git a/for-tests/extensions/export/export-customTypes.html b/for-tests/extensions/export/export-customTypes.html
new file mode 100644
index 00000000..89d98451
--- /dev/null
+++ b/for-tests/extensions/export/export-customTypes.html
@@ -0,0 +1,38 @@
+<script>
+  init({
+    title: 'Export Custom Types',
+    desc: 'Test exportTypes with multiple supported types.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' },
+        { id: 3, name: 'Item 3', price: '$3' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-dataType-all.html b/for-tests/extensions/export/export-dataType-all.html
new file mode 100644
index 00000000..36f4a583
--- /dev/null
+++ b/for-tests/extensions/export/export-dataType-all.html
@@ -0,0 +1,41 @@
+<script>
+  init({
+    title: 'Export Data Type All',
+    desc: 'Test exportDataType=all with pagination.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    const data = []
+
+    for (let i = 1; i <= 50; i++) {
+      data.push({ id: i, name: `Item ${i}`, price: `$${i}` })
+    }
+    $('#table').bootstrapTable({
+      showExport: true,
+      exportDataType: 'all',
+      pagination: true,
+      pageSize: 10,
+      data
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-dataType-selected.html b/for-tests/extensions/export/export-dataType-selected.html
new file mode 100644
index 00000000..3c9828c4
--- /dev/null
+++ b/for-tests/extensions/export/export-dataType-selected.html
@@ -0,0 +1,39 @@
+<script>
+  init({
+    title: 'Export Data Type Selected',
+    desc: 'Test exportDataType=selected with checkbox selection.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="state" data-checkbox="true"></th>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      exportDataType: 'selected',
+      data: [
+        { id: 1, name: 'Item 1', price: '$1', state: false },
+        { id: 2, name: 'Item 2', price: '$2', state: false },
+        { id: 3, name: 'Item 3', price: '$3', state: false }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-events.html b/for-tests/extensions/export/export-events.html
new file mode 100644
index 00000000..555d4f22
--- /dev/null
+++ b/for-tests/extensions/export/export-events.html
@@ -0,0 +1,44 @@
+<script>
+  init({
+    title: 'Export Events',
+    desc: 'Test export-started and export-saved events.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' }
+      ]
+    })
+
+    $('#table').on('export-started.bs.table', function () {
+      window._exportStarted = true
+    })
+    $('#table').on('export-saved.bs.table', function (e, data) {
+      window._exportSaved = true
+      window._exportedData = data
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-fileName-function.html b/for-tests/extensions/export/export-fileName-function.html
new file mode 100644
index 00000000..5fee8918
--- /dev/null
+++ b/for-tests/extensions/export/export-fileName-function.html
@@ -0,0 +1,41 @@
+<script>
+  init({
+    title: 'Export fileName Function',
+    desc: 'Test exportOptions.fileName as function.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      exportOptions: {
+        fileName () {
+          return 'custom-export-name'
+        }
+      },
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-footer.html b/for-tests/extensions/export/export-footer.html
new file mode 100644
index 00000000..7f145d45
--- /dev/null
+++ b/for-tests/extensions/export/export-footer.html
@@ -0,0 +1,47 @@
+<script>
+  init({
+    title: 'Export Footer',
+    desc: 'Test exportFooter=true to include table footer in export.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Total</td>
+      <td></td>
+      <td>$6</td>
+    </tr>
+  </tfoot>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      showFooter: true,
+      exportFooter: true,
+      height: 400,
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' },
+        { id: 3, name: 'Item 3', price: '$3' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-forceExport.html b/for-tests/extensions/export/export-forceExport.html
new file mode 100644
index 00000000..f36b95a4
--- /dev/null
+++ b/for-tests/extensions/export/export-forceExport.html
@@ -0,0 +1,38 @@
+<script>
+  init({
+    title: 'Export forceExport',
+    desc: 'Test forceExport column option to export hidden columns.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+      <th data-field="secret" data-visible="false" data-force-export="true">Secret</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      data: [
+        { id: 1, name: 'Item 1', price: '$1', secret: 's1' },
+        { id: 2, name: 'Item 2', price: '$2', secret: 's2' },
+        { id: 3, name: 'Item 3', price: '$3', secret: 's3' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-forceHide.html b/for-tests/extensions/export/export-forceHide.html
new file mode 100644
index 00000000..5526eb42
--- /dev/null
+++ b/for-tests/extensions/export/export-forceHide.html
@@ -0,0 +1,38 @@
+<script>
+  init({
+    title: 'Export forceHide',
+    desc: 'Test forceHide column option to hide columns from export.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+      <th data-field="icon" data-force-hide="true">Icon</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      data: [
+        { id: 1, name: 'Item 1', price: '$1', icon: '⭐' },
+        { id: 2, name: 'Item 2', price: '$2', icon: '🔥' },
+        { id: 3, name: 'Item 3', price: '$3', icon: '✅' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-method.html b/for-tests/extensions/export/export-method.html
new file mode 100644
index 00000000..8a9d63c8
--- /dev/null
+++ b/for-tests/extensions/export/export-method.html
@@ -0,0 +1,41 @@
+<script>
+  init({
+    title: 'Export Method',
+    desc: 'Test exportTable() method for programmatic export.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<button id="btn-export" class="btn btn-secondary">Export CSV</button>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' }
+      ]
+    })
+
+    $('#btn-export').click(function () {
+      $('#table').bootstrapTable('exportTable', { type: 'csv' })
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-multipleTypes.html b/for-tests/extensions/export/export-multipleTypes.html
new file mode 100644
index 00000000..86711465
--- /dev/null
+++ b/for-tests/extensions/export/export-multipleTypes.html
@@ -0,0 +1,37 @@
+<script>
+  init({
+    title: 'Export Multiple Types',
+    desc: 'Test exportTypes with multiple types (partial list).',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      exportTypes: ['json', 'csv'],
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-showExport.html b/for-tests/extensions/export/export-showExport.html
new file mode 100644
index 00000000..3372819c
--- /dev/null
+++ b/for-tests/extensions/export/export-showExport.html
@@ -0,0 +1,37 @@
+<script>
+  init({
+    title: 'Export Show Export',
+    desc: 'Test showExport option to display export button.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' },
+        { id: 3, name: 'Item 3', price: '$3' }
+      ]
+    })
+  }
+</script>
diff --git a/for-tests/extensions/export/export-singleType.html b/for-tests/extensions/export/export-singleType.html
new file mode 100644
index 00000000..eec853a9
--- /dev/null
+++ b/for-tests/extensions/export/export-singleType.html
@@ -0,0 +1,37 @@
+<script>
+  init({
+    title: 'Export Single Type',
+    desc: 'Test exportTypes with single type shows a button instead of dropdown.',
+    links: [
+      'bootstrap-table.min.css'
+    ],
+    scripts: [
+      'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
+      'bootstrap-table.min.js',
+      'extensions/export/bootstrap-table-export.min.js'
+    ]
+  })
+</script>
+
+<table id="table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="price">Price</th>
+    </tr>
+  </thead>
+</table>
+
+<script>
+  function mounted () {
+    $('#table').bootstrapTable({
+      showExport: true,
+      exportTypes: ['csv'],
+      data: [
+        { id: 1, name: 'Item 1', price: '$1' },
+        { id: 2, name: 'Item 2', price: '$2' }
+      ]
+    })
+  }
+</script>