Comment résoudre le problème des caractères tronqués lors de l'exportation d'Excel avec Vue.js

Vue.js est un framework JavaScript frontal populaire. Dans le développement de Vue.js, lorsque vous utilisez des fichiers binaires pour exporter des fichiers Excel, vous pouvez rencontrer le problème des caractères Excel tronqués. Cet article vous aidera à résoudre le problème des caractères tronqués lors de l'exportation d'Excel avec Vue.js en présentant le concept et les solutions du codage binaire.

1. Codage binaire

Le codage binaire est un concept très important en informatique. Voici une brève introduction. Les données dans les ordinateurs sont stockées sous forme de nombres binaires. Les nombres binaires sont uniquement composés de 0 et de 1. Chaque nombre binaire représente un poids. Par exemple, le nombre décimal 123 peut être représenté par 1111011 en binaire, où les poids de chaque chiffre binaire sont respectivement 1, 2, 4, 8, 16, 32 et 64. Cette méthode de représentation des nombres à l’aide de nombres binaires est appelée codage binaire.

2. Problèmes d'encodage binaire et d'Excel tronqués

Dans Vue.js, si vous utilisez l'encodage binaire pour exporter des fichiers Excel, vous risquez de rencontrer des caractères tronqués. La raison spécifique est que l'analyseur peut confondre le codage binaire avec d'autres formats de codage, tels que le codage UTF-8 ou le codage GBK. Cette mauvaise reconnaissance entraîne des fichiers Excel tronqués, car Excel doit utiliser un format de codage spécifique pour afficher et analyser correctement les données.

3. Solution

Afin de résoudre le problème des fichiers Excel tronqués exportés par Vue.js, nous pouvons utiliser des flux de fichiers comme support intermédiaire pour garantir l'exactitude des données en spécifiant le format d'encodage du fichier Excel. Voici les solutions spécifiques.

Première étape : installer les dépendances

Ouvrez le terminal dans le répertoire racine du projet Vue.js et exécutez la commande suivante pour installer les dépendances requises :

npm install file-saver script-loader -S

Deuxième étape : encapsulez la méthode d'exportation d'Excel

Dans Vue. js, définissez une méthode permettant d'exporter un fichier Excel :

export function exportExcel(data, name) {
  require.ensure([], () => {
    const { utils, writeFile } = require('xlsx');
    const sheet = utils.json_to_sheet(data);
    const workbook = utils.book_new();
    utils.book_append_sheet(workbook, sheet);
    const wbout = writeFile(workbook, { bookType: 'xlsx', bookSST: true, type: 'binary' });
    saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), `${name}.xlsx`);
  });
}

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

Le code ci-dessus encapsule une fonction nommée exportExcel, qui reçoit deux paramètres : les données et le nom du fichier. Cette méthode d'exportation d'Excel est basée sur xlsx.js, vous devez donc installer xlsx.js avant de pouvoir utiliser sa méthode.

Étape 3 : Appeler la méthode d'export Excel

Dans le code métier spécifique, il vous suffit d'appeler la méthode d'export Excel juste encapsulée. Par exemple, le code suivant montre comment exporter un tableau vers un fichier Excel :

import { exportExcel } from '@/utils/exportExcel';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 21 },
        { name: '王五', age: 22 },
        { name: '赵六', age: 23 },
      ],
    };
  },
  methods: {
    export() {
      exportExcel(this.tableData, '数据表');
    },
  },
};

4. Résumé

Vue.js est un framework JavaScript frontal populaire, mais des caractères tronqués sont susceptibles d'apparaître lors de l'exportation de fichiers Excel à l'aide de fichiers binaires. fichiers. Pour résoudre ce problème, vous pouvez utiliser des flux de fichiers comme support intermédiaire et utiliser le format de codage de fichier Excel spécifié pour garantir l'exactitude des données. Grâce aux étapes ci-dessus, nous pouvons facilement résoudre le problème des fichiers Excel tronqués exportés par Vue.js.

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!