将 Bootstrap 表导出到 Excel 或 pdf

Question

我正在使用 bootstrap vue table，并且我想将 bootstrap table 导出到 excel 或 pdf。它就像表中的表，我发现如何导出它以供下载为 excel 或 pdf 很困难，因为我遇到的其他解决方案都只涉及提供 json 数据，它可以工作，但不能'找不到关于我的问题的任何解决方案。

Codesandbox演示

<template>
  <div id="app">
    <b-button @click="exportTable" class="mb-3">Export</b-button>
    <b-table-simple outlined id="htmltable">
      <b-thead class="b-table__head">
        <b-tr>
          <b-th class="small-tab">Goods</b-th>
          <b-th>Units</b-th>
          <b-th>Price Per Unit</b-th>
          <b-th>Total Price</b-th>
        </b-tr>
      </b-thead>
      <b-tbody v-for="(service, index) in goodsGroupedByCategory" :key="index">
        <b-tr class="category-line">
          <b-th class="small-tab cs-textstyle-paragraph-small-bold">{{
            index
          }}</b-th>
          <b-td></b-td>
          <b-td></b-td>
          <b-th class="cs-textstyle-paragraph-small-bold">{{
            service.reduce(function (prev, curr) {
              return prev + curr.total_units * curr.price_per_unit;
            }, 0)
          }}</b-th>
        </b-tr>
        <b-tr
          v-for="serviceItem in service"
          :key="serviceItem.id"
          class="item-line"
        >
          <b-td class="big-tab cs-textstyle-paragraph-small">{{
            serviceItem.billing_sku_name
          }}</b-td>
          <b-td class="cs-textstyle-paragraph-small">{{
            serviceItem.total_units
          }}</b-td>
          <b-td class="cs-textstyle-paragraph-small">{{
            serviceItem.price_per_unit
          }}</b-td>
          <b-td class="cs-textstyle-paragraph-small">{{
            serviceItem.total_units * serviceItem.price_per_unit
          }}</b-td>
        </b-tr>
      </b-tbody>
    </b-table-simple>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "App",
  components: {},
  data() {
    return {
      invoice: [
        {
          id: "123",
          billing_sku_id: "FOOD_ITEMS",
          billing_sku_name: "Rice",
          total_units: 1,
          billing_sku_category: "Food Items",
          price_per_unit: 3,
        },
        {
          id: "456",
          billing_sku_id: "FOOD_ITEMS",
          billing_sku_name: "Wheat",
          total_units: 3,
          billing_sku_category: "Food Items",
          price_per_unit: 5,
        },
        {
          id: "789",
          billing_sku_id: "ELECTRICITY_ITEMS",
          billing_sku_name: "Bulb",
          total_units: 5,
          billing_sku_category: "Electricity Items",
          price_per_unit: 50,
        },
      ],
    };
  },
  computed: {
    goodsGroupedByCategory() {
      return _.groupBy(this.invoice, "billing_sku_category");
    },
  },
  methods: {
    exportTable() {
      console.log("hello");
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  padding: 10px;
}
</style>

Answer 1

我在vue-html2pdf包的帮助下找到了解决方案。首先，我创建了一个名为的单独组件TableCompo，其代码如下：

TableCompo.vue：

<template>
  <div id="tableMe">
    <b-table-simple outlined id="htmltable">
      <b-thead class="b-table__head">
        <b-tr>
          <b-th class="small-tab">Goods</b-th>
          <b-th>Units</b-th>
          <b-th>Price Per Unit</b-th>
          <b-th>Total Price</b-th>
        </b-tr>
      </b-thead>
      <b-tbody v-for="(service, index) in goodsGroupedByCategory" :key="index">
        <b-tr class="category-line">
          <b-th class="small-tab cs-textstyle-paragraph-small-bold">{{
              index
            }}</b-th>
          <b-td></b-td>
          <b-td></b-td>
          <b-th class="cs-textstyle-paragraph-small-bold">{{
              service.reduce(function (prev, curr) {
                return prev + curr.total_units * curr.price_per_unit;
              }, 0)
            }}</b-th>
        </b-tr>
        <b-tr
            v-for="serviceItem in service"
            :key="serviceItem.id"
            class="item-line"
        >
          <b-td class="big-tab cs-textstyle-paragraph-small">{{
              serviceItem.billing_sku_name
            }}</b-td>
          <b-td class="cs-textstyle-paragraph-small">{{
              serviceItem.total_units
            }}</b-td>
          <b-td class="cs-textstyle-paragraph-small">{{
              serviceItem.price_per_unit
            }}</b-td>
          <b-td class="cs-textstyle-paragraph-small">{{
              serviceItem.total_units * serviceItem.price_per_unit
            }}</b-td>
        </b-tr>
      </b-tbody>
    </b-table-simple>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "TableCompo",
  data() {
    return {
      invoice: [
        {
          id: "123",
          billing_sku_id: "FOOD_ITEMS",
          billing_sku_name: "Rice",
          total_units: 1,
          billing_sku_category: "Food Items",
          price_per_unit: 3,
        },
        {
          id: "456",
          billing_sku_id: "FOOD_ITEMS",
          billing_sku_name: "Wheat",
          total_units: 3,
          billing_sku_category: "Food Items",
          price_per_unit: 5,
        },
        {
          id: "789",
          billing_sku_id: "ELECTRICITY_ITEMS",
          billing_sku_name: "Bulb",
          total_units: 5,
          billing_sku_category: "Electricity Items",
          price_per_unit: 50,
        },
      ],
    };
  },
  computed: {
    goodsGroupedByCategory() {
      return _.groupBy(this.invoice, "billing_sku_category");
    },
  },
}
</script>

<style scoped>
#tableMe {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  padding: 10px;
}
</style>

之后，我创建了一个父组件（或视图），使用该组件和vue-html2pdf包将表的内容导出为 pdf：

TableView.vue：

<template>
  <div>
    <b-button @click="generateReport" class="mb-3">Export</b-button>
    <!-- first usage of table component: this is for showing the table in browser for users -->
    <table-compo></table-compo>

    <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="false"
        :paginate-elements-by-height="1400"
        filename="my-table"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a5"
        pdf-orientation="landscape"
        pdf-content-width="100%"
        ref="html2Pdf"
    >
      <section slot="pdf-content">
      <!-- second usage of table component: this is for putting the contents of table to final pdf  -->
        <table-compo></table-compo>
      </section>
    </vue-html2pdf>
  </div>
</template>

<script>
import VueHtml2pdf from 'vue-html2pdf';
import TableCompo from '../components/TableCompo'
export default {
  name: "TableView",
  components: {
    VueHtml2pdf,
    TableCompo
  },
  methods: {
    /*
        Generate Report using refs and calling the
        refs function generatePdf()
    */
    generateReport () {
      this.$refs.html2Pdf.generatePdf();
    }
  },
}
</script>

<style scoped>

</style>

如果您对我的设置不满意，请参阅该软件包的文档以找到您所需的设置。