Comment exporter Excel à partir de l'interface utilisateur de l'élément

Cette fois, je vais vous montrer comment exporter Excel depuis l'élément UI. Quelles sont les précautions lors de l'exportation d'Excel depuis l'élément UI. Voici un cas pratique, jetons un coup d'œil.

1. Installer les dépendances associées

Principalement deux dépendances

npm install --save xlsx file-saver

Si vous souhaitez voir l'utilisation des deux plug-ins en détail, veuillez vous rendre sur github.

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

2. Introduisez

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

dans le composant 3. Écrivez une méthode dans les méthodes du composant

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
},

Remarque : XLSX.uitls.table_to_book (le nœud DOM de la table est placé), sheetjs.xlsx est le nom de la table exportée, qui peut être modifiée !

4. Cliquez sur le bouton exporter pour exécuter la méthode exportExcel.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur php. Site chinois !

Lecture recommandée :

Explication détaillée des étapes de vue-dplayer à implémenter lecture hls

Comment vue slot affiche-t-il le composant parent dans le composant enfant et le transmet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!