So lösen Sie das Problem verstümmelter Zeichen beim Exportieren von Excel mit Vue.js

Vue.js ist ein beliebtes Front-End-JavaScript-Framework. Wenn Sie in der Vue.js-Entwicklung Binärdateien zum Exportieren von Excel-Dateien verwenden, kann es zu Problemen mit verstümmelten Excel-Zeichen kommen. Dieser Artikel hilft Ihnen, das Problem verstümmelter Zeichen beim Exportieren von Excel mit Vue.js zu lösen, indem er das Konzept und die Lösungen der Binärkodierung vorstellt.

1. Binäre Codierung

Binäre Codierung ist ein sehr wichtiges Konzept in Computern. Hier ist eine kurze Einführung. Daten in Computern werden in Binärzahlen gespeichert. Binärzahlen bestehen nur aus 0 und 1. Jede Binärzahl stellt ein Gewicht dar. Beispielsweise kann die Dezimalzahl 123 binär als 1111011 dargestellt werden, wobei die Gewichtungen jeder Binärziffer 1, 2, 4, 8, 16, 32 bzw. 64 betragen. Diese Methode zur Darstellung von Zahlen mithilfe von Binärzahlen wird als binäre Kodierung bezeichnet.

2. Probleme mit der Binärkodierung und verstümmelten Excel-Dateien

Wenn Sie in Vue.js die Binärkodierung zum Exportieren von Excel-Dateien verwenden, werden Sie wahrscheinlich auf verstümmelte Zeichen stoßen. Der konkrete Grund besteht darin, dass der Parser die binäre Codierung möglicherweise mit anderen Codierungsformaten wie UTF-8-Codierung oder GBK-Codierung verwechselt. Diese Fehlerkennung führt zu verstümmelten Excel-Dateien, da Excel ein bestimmtes Codierungsformat verwenden muss, um die Daten korrekt anzuzeigen und zu analysieren.

3. Lösung

Um das Problem der von Vue.js exportierten verstümmelten Excel-Dateien zu lösen, können wir Dateistreams als Zwischenmedien verwenden, um die Richtigkeit der Daten sicherzustellen, indem wir das Codierungsformat der Excel-Datei angeben. Hier sind die konkreten Lösungen.

Schritt eins: Abhängigkeiten installieren

Öffnen Sie das Terminal im Stammverzeichnis des Vue.js-Projekts und führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:

npm install file-saver script-loader -S

Schritt zwei: Kapseln Sie die Methode zum Exportieren von Excel

In Vue. js-Anwendung definieren Sie eine Methode, die eine Excel-Datei exportieren kann:

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

Der obige Code kapselt eine Funktion namens exportExcel, die zwei Parameter empfängt: Daten und Dateiname. Diese Methode zum Exportieren von Excel basiert auf xlsx.js. Sie müssen also xlsx.js installieren, bevor Sie diese Methode verwenden können.

Schritt 3: Rufen Sie die Export-Excel-Methode auf

Im spezifischen Geschäftscode müssen Sie nur die gerade gekapselte Export-Excel-Methode aufrufen. Der folgende Code zeigt beispielsweise, wie ein Array in eine Excel-Datei exportiert wird:

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. Zusammenfassung

Vue.js ist ein beliebtes Front-End-JavaScript-Framework, aber es ist anfällig für verstümmelte Zeichen, wenn Excel-Dateien im Binärformat exportiert werden Dateien. Um dieses Problem zu lösen, können Sie Dateistreams als Zwischenmedien verwenden und das angegebene Excel-Dateikodierungsformat verwenden, um die Richtigkeit der Daten sicherzustellen. Mit den oben genannten Schritten können wir das Problem der von Vue.js exportierten verstümmelten Excel-Dateien leicht lösen.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem verstümmelter Zeichen beim Exportieren von Excel mit Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!