Q:

Скачать динамическую таблицу из браузера в Excel файле

Есть HTML таблица, построенная в браузере через VueJS, ее необходимо скачать в формате Excel.  Это должно довольно универсальное решение, которое можно расширить на многие виды таблиц. 
Такие варианты не подходят:

скачать HTML под видом .xlsx
таблица строится по фильтрам в браузере, поэтому серверная генерация через PHPExcel не подходит - придется и в браузере через JS фильтровать, и на сервере через PHP, да еще и код построения "ячейка А1, записать ..." поддерживать - а таблиц много, рефакторить все подряд невозможно, только самый минимум изменений
готовая JS-либа, которая и таблицу строит, и скачивает Excel.  Таблица уже построена средствами VueJS, ее возможно менять, но отказаться от VueJS нельзя

Особенность: в таблице есть небольшое декорирование, например, теги <span>. 
Как это можно сделать наиболее простым путем?  Есть такие идеи:

получаем содержимое <table>..</table> в виде строки, которую шлем на сервер, и уже он строит Excel (PHP, NodeJS, еще что-то).  Но как? 
какая-то JS-библиотека, которую можно "натравить" на <table>

Пример таблицы:

"use strict";

var nsReport = new Vue({
  el: "#js-ns-report",
  data: {
    atLeastOneTender: true,
    items: [{
        skuArticul: "ABB-101",
        _selected: true,
        skuName: "",
        RequestNumber: "-",
        orderNumber: "-",
        specificProduct: "-",
        deliveryPointName: "-",
        deliveryPointAddress: "-",
        tender: "-",
        remainDemand: "-",
        freeStock: "-",
        status: "В процессе"
      },
      {
        skuArticul: "BDN-16",
        _selected: true,
        skuName: "",
        RequestNumber: "-",
        orderNumber: "-",
        specificProduct: "-",
        deliveryPointName: "-",
        deliveryPointAddress: "-",
        tender: "-",
        remainDemand: "-",
        freeStock: "-",
        status: "В процессе"
      },
      {
        skuArticul: "YML-9",
        _selected: true,
        skuName: "",
        RequestNumber: "-",
        orderNumber: "-",
        specificProduct: "-",
        deliveryPointName: "-",
        deliveryPointAddress: "-",
        tender: "-",
        remainDemand: "-",
        freeStock: "-",
        status: "В процессе"
      }
    ]
  }
});
.table {
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<div id="js-ns-report">

  <div class="btn btn-primary" @click="atLeastOneTender = ! atLeastOneTender">Скрыть/показать колонку</div>
  <div class="btn btn-default">Скачать в Excel</div>

  <table class="table table-bordered ns-table">
    <thead>
      <tr>
        <th rowspan="2">
          <label for="select-row-all" class="custom-control custom-checkbox" title="Выделить все / снять выделение" style="display: inline-block;">
     <input type="checkbox" class="custom-control-input" id="select-row-all">
     <span class="custom-control-indicator"></span>
     &nbsp;
    </label> Артикул
        </th>
        <th rowspan="2">
          Название
        </th>
        <th rowspan="2">Заявка</th>
        <th rowspan="2">
          Счет
        </th>
        <th rowspan="2">
          Заказная продукция
        </th>
        <th rowspan="2">Грузополучатель</th>
        <th rowspan="2">Адрес доставки</th>
        <th rowspan="2" v-if="atLeastOneTender">
          Тендер
        </th>
        <th colspan="2" class="text-center">Остаток</th>
        <th rowspan="2" class="text-center">
          Статус
        </th>
      </tr>
      <tr>
        <th>спроса</th>
        <th>свободный</th>
      </tr>

    </thead>
    <tbody>
      <tr v-for="(row, idx) in items">
        <td class="nowrap-ellipsis">
          <label :for="'select-row-' + idx" class="custom-control custom-checkbox" style="display: inline-block;">
     <input type="checkbox" class="custom-control-input"
      :id="'select-row-' + idx"
      v-model="row._selected">
      &nbsp;
     <span class="custom-control-indicator"></span>
    </label> {{ row.skuArticul }}
        </td>
        <td>{{ row.skuName }}</td>
        <td>{{ row. RequestNumber }}</td>
        <td>{{ row.orderNumber }}</td>
        <td>{{ row.specificProduct == '1' ? ' Да' : 'Нет' }}</td>
        <td>{{ row.deliveryPointName }}</td>
        <td>{{ row.deliveryPointAddress }}</td>
        <td v-if="atLeastOneTender">{{ row.tender }}</td>
        <td>{{ row.remainDemand }}</td>
        <td>
          {{ row.freeStock }}
        </td>
        <td>{{ row.status }}</td>
      </tr>
    </tbody>
  </table>
</div>

A:

Нашел библиотеку SheetJS, вот демка, которая берет DOM элемент <table ... и делает .xlsx, а вообще заявлено в документации множество форматов: ODS, CSV, ..., причем можно и в обратную сторону Excel => HTML
Можно прикрутить к любой странице, не обязательно VueJS:

Вставляем скрипт <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
Добавляем id таблице: id="js-table"
Делаем обработчик нажатия на кнопку Экспорт:

var workbook = XLSX.utils.table_to_book(document.getElementById('js-table'));
XLSX.writeFile(workbook, 'filename.xlsx');

Также есть либа tableexport
Вот так получилось в моем примере:

"use strict";

var nsReport = new Vue({
  el: "#js-ns-report",
  methods: {
    toExcel: function() {
      var workbook = XLSX.utils.table_to_book(document.getElementById('js-table'));
      XLSX.writeFile(workbook, 'filename.xlsx');
    }
  },
  data: {
    atLeastOneTender: true,
    items: [{
        skuArticul: "ABB-101",
        _selected: true,
        skuName: "",
        RequestNumber: "-",
        orderNumber: "-",
        specificProduct: "-",
        deliveryPointName: "-",
        deliveryPointAddress: "-",
        tender: "-",
        remainDemand: "-",
        freeStock: "-",
        status: "В процессе"
      },
      {
        skuArticul: "BDN-16",
        _selected: true,
        skuName: "",
        RequestNumber: "-",
        orderNumber: "-",
        specificProduct: "-",
        deliveryPointName: "-",
        deliveryPointAddress: "-",
        tender: "-",
        remainDemand: "-",
        freeStock: "-",
        status: "В процессе"
      },
      {
        skuArticul: "YML-9",
        _selected: true,
        skuName: "",
        RequestNumber: "-",
        orderNumber: "-",
        specificProduct: "-",
        deliveryPointName: "-",
        deliveryPointAddress: "-",
        tender: "-",
        remainDemand: "-",
        freeStock: "-",
        status: "В процессе"
      }
    ]
  }
});
.table {
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<div id="js-ns-report">

  <div class="btn btn-primary" @click="atLeastOneTender = ! atLeastOneTender">Скрыть/показать колонку</div>
  <div class="btn btn-default" @click="toExcel">Скачать в Excel</div>

  <table id="js-table" class="table table-bordered ns-table">
    <thead>
      <tr>
        <th rowspan="2">
          <label for="select-row-all" class="custom-control custom-checkbox" title="Выделить все / снять выделение" style="display: inline-block;">
     <input type="checkbox" class="custom-control-input" id="select-row-all">
     <span class="custom-control-indicator"></span>
     &nbsp;
    </label> Артикул
        </th>
        <th rowspan="2">
          Название
        </th>
        <th rowspan="2">Заявка</th>
        <th rowspan="2">
          Счет
        </th>
        <th rowspan="2">
          Заказная продукция
        </th>
        <th rowspan="2">Грузополучатель</th>
        <th rowspan="2">Адрес доставки</th>
        <th rowspan="2" v-if="atLeastOneTender">
          Тендер
        </th>
        <th colspan="2" class="text-center">Остаток</th>
        <th rowspan="2" class="text-center">
          Статус
        </th>
      </tr>
      <tr>
        <th>спроса</th>
        <th>свободный</th>
      </tr>

    </thead>
    <tbody>
      <tr v-for="(row, idx) in items">
        <td class="nowrap-ellipsis">
          <label :for="'select-row-' + idx" class="custom-control custom-checkbox" style="display: inline-block;">
     <input type="checkbox" class="custom-control-input"
      :id="'select-row-' + idx"
      v-model="row._selected">
      &nbsp;
     <span class="custom-control-indicator"></span>
    </label> {{ row.skuArticul }}
        </td>
        <td>{{ row.skuName }}</td>
        <td>{{ row. RequestNumber }}</td>
        <td>{{ row.orderNumber }}</td>
        <td>{{ row.specificProduct == '1' ? ' Да' : 'Нет' }}</td>
        <td>{{ row.deliveryPointName }}</td>
        <td>{{ row.deliveryPointAddress }}</td>
        <td v-if="atLeastOneTender">{{ row.tender }}</td>
        <td>{{ row.remainDemand }}</td>
        <td>
          {{ row.freeStock }}
        </td>
        <td>{{ row.status }}</td>
      </tr>
    </tbody>
  </table>
</div>

