Excel 또는 PDF로 부트스트랩 테이블 내보내기

Excel 또는 PDF로 부트스트랩 테이블 내보내기

부트스트랩 vue 테이블을 사용하고 있는데 부트스트랩 테이블을 excel 또는 pdf로 내보내고 싶습니다.테이블 안에 있는 테이블과 같아서 엑셀이나 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>

다음 패키지가 있습니다.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')
    
        }
        //...
    }

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>

설정이 마음에 들지 않는 경우는, 패키지의 메뉴얼을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/71465593/exporting-bootstrap-table-to-excel-or-pdf