Solutions aux problèmes rencontrés lors de l'exportation d'Excel avec vue

Le contenu de cet article concerne les solutions aux problèmes rencontrés lors de l'exportation d'Excel avec Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Exigences :

Exportez toutes les données actuelles sous Vue+element UI el-table vers un fichier Excel.

Suivez d'abord les méthodes en ligne pour voir quels sont les pièges.

Travail de préparation :

1 Dépendances d'installation : fil ajouter xlsx file-saver -S

2. Introduisez

import FileSaver from "file-saver";
import XLSX from "xlsx";

dans les composants qui doivent être exportés. 3. Le paramètre en HTML consiste simplement à ajouter un identifiant à la balise de table el-table qui doit être exportée : comme outTable. , correspondant document.querySelector('#outTable') dans la méthode exportExcel ci-dessous

　　 //导出当前表格
exportCurrent:function(){
    var wb = XLSX.utils.table_to_book(document.querySelector('#outTable')) //表格id
    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheet.xlsx')  //文件名
    } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    return wbout
},

Jetons un coup d'œil aux données originales

Prenons à voir ensuite Résultats exportés

Hein ? ? ? Pourquoi mon numéro de commande et mon numéro de carte bancaire sont-ils devenus une notation scientifique ? ?

Et mon temps, où sont les heures, les minutes et les secondes ? ?

La raison est que le numéro est trop long et vous devez utiliser le format texte Excel pour l'afficher correctement

Après diverses recherches, la solution finale est la suivante :

exportExcel() {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

Revoyons Nos données

sont terminées.

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!