2020年新年大赛！

Question

Total Pusher

Asked:2020-06-05 15:32:43 +0000 UTC2020-06-05 15:32:43 +0000 UTC 2020-06-05 15:32:43 +0000 UTC

从浏览器下载动态表格到 Excel 文件

772

浏览器中有一个使用 VueJS 构建的 HTML 表格，需要以 Excel 格式下载。这应该是一个相当通用的解决方案，可以扩展到多种表格。

这些选项不适合：

伪装下载html.xlsx
该表是在浏览器中使用过滤器构建的，因此服务器端生成PHPExcel不适合-您将必须在浏览器中通过JS进行过滤，在服务器上通过PHP进行过滤，甚至支持构建代码“单元格A1，写下来。 ..” - 并且有很多表，重构所有不可能的东西，只进行最少的更改
一个现成的 JS-liba，可以建表并下载 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>

1 个回答

Voted

Total Pusher · Answer 1 · 2020-06-05T18:40:05Z

我找到了SheetJS库，这是一个使用 DOM 元素并执行的演示，但一般来说，文档中说明了很多格式：、、...，你可以在相反的方向上进行=><table ....xlsxODSCSVExcelHTML

可以附加到任何页面，不一定是 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>

从浏览器下载动态表格到 Excel 文件

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

从浏览器下载动态表格到 Excel 文件

1 个回答

相关问题