将 bootstrap table 导出为 excel 或 pdf

Question

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

Codesandbox demonstration

<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

你有这个包裹：https://www.npmjs.com/package/xlsx 在你的 html 中，创建一个按钮并与 @click="exportInvoiceButton()"。这是您可以在前端执行此操作的方法之一，但是，或者，执行此导出的最佳方法可能是从后端执行，因此您可以更灵活地导出内容。

import XLSX from 'xlsx';    
//...
methods: {
        //...
        exportInvoiceButton() {
            const invoices = this.invoices.reduce((ac, invoice) => { 
                ac.push({ 
                    billing_sku_id: invoice.billing_sku_id, 
                    billing_sku_name: invoice.billing_sku_name,
                    total_units: invoice.total_units,
                    // ...
                }); 
                return ac;
            }, [])
    
            var invoicesWS = XLSX.utils.json_to_sheet(invoices)
    
            // A workbook is the name given to an Excel file
            var wb = XLSX.utils.book_new() // make Workbook of Excel
    
            // add Worksheet to Workbook
            // Workbook contains one or more worksheets
            XLSX.utils.book_append_sheet(wb, invoicesWS, 'Invoices list') // invoices list is name of Worksheet
    
    
            // export Excel file
            XLSX.writeFile(wb, 'Invoices.xlsx')
    
        }
        //...
    }

Answer 2

我在 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 包将 table 的内容导出为 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>

如果您对我的设置不满意，请参阅该软件包的 documentation 以找到您想要的设置。

将 bootstrap table 导出为 excel 或 pdf

exporting bootstrap table to excel or pdf

vue.js

vuejs2

bootstrap-vue