экспорт данных el-table в Excel в vue2.0 + элемент пользовательского интерфейса

Vue.js

экспорт данных el-table в Excel в vue2.0 + элемент пользовательского интерфейса

1,Установить связанные зависимости

В основном две зависимости

npm install --save xlsx file-saver

Если вы хотите подробно ознакомиться с использованием двух плагинов, перейдите на github.

GitHub.com/sheet JS/ просто…
GitHub.com/Eli GRE собирается/FI…

2,импортировать в компонент

    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'

3.Напишите метод в методах компонента

     exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },

Уведомление:XLSX.uitls.table_to_book (размещается DOM-узел таблицы), sheetjs.xlsx — имя экспортируемой таблицы, которое можно изменить!

4.Нажмите кнопку экспорта, чтобы выполнить метод exportExcel.

Скриншот кода в компоненте:
这里写图片描述

Схема эффекта выглядит следующим образом:
Экспортируйте данные из следующей таблицы в Excel.
这里写图片描述
Экспорт в лист excel, результат такой:
这里写图片描述

Ссылки по теме:
Другие сценарии использования инструмента (например, react, jQ, angular)sheetjs.com/

Категории