Bagaimana untuk menyelesaikan masalah aksara bercelaru apabila mengeksport Excel dengan Vue.js

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular. Dalam pembangunan Vue.js, apabila menggunakan fail binari untuk mengeksport fail Excel, anda mungkin menghadapi masalah aksara bercelaru Excel. Artikel ini akan membantu anda menyelesaikan masalah aksara bercelaru apabila mengeksport Excel dengan Vue.js dengan memperkenalkan konsep dan penyelesaian pengekodan binari.

1. Pengekodan binari

Pengekodan binari ialah konsep yang sangat penting dalam komputer. Data dalam komputer disimpan dalam nombor binari hanya terdiri daripada 0 dan 1. Setiap nombor binari mewakili berat. Sebagai contoh, nombor perpuluhan 123 boleh diwakili sebagai 1111011 dalam perduaan, di mana pemberat setiap digit perduaan ialah 1, 2, 4, 8, 16, 32, dan 64 masing-masing. Kaedah mewakili nombor menggunakan nombor binari ini dipanggil pengekodan binari.

2. Pengekodan binari dan masalah kod bercelaru Excel

Dalam Vue.js, jika anda menggunakan pengekodan binari untuk mengeksport fail Excel, anda berkemungkinan menghadapi masalah kod bercelaru. Sebab khusus ialah pengekodan binari mungkin disalah anggap oleh penghurai untuk format pengekodan lain, seperti pengekodan UTF-8 atau pengekodan GBK. Salah pengiktirafan ini mengakibatkan fail Excel bercelaru kerana Excel memerlukan format pengekodan khusus untuk memaparkan dan menghuraikan data dengan betul.

3. Penyelesaian

Untuk menyelesaikan masalah fail Excel bercelaru yang dieksport oleh Vue.js, kami boleh menggunakan aliran fail sebagai media perantaraan untuk memastikan ketepatan data dengan menyatakan pengekodan format fail Excel. Berikut ialah penyelesaian khusus.

Langkah satu: Pasang kebergantungan

Buka terminal dalam direktori akar projek Vue.js dan laksanakan arahan berikut untuk memasang kebergantungan yang diperlukan:

npm install file-saver script-loader -S

Langkah 2: Merangkumkan kaedah mengeksport Excel

Di lokasi yang sesuai untuk aplikasi Vue.js, tentukan kaedah yang boleh mengeksport fail 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;
}

Kod di atas merangkumi satu kaedah bernama Fungsi exportExcel menerima dua parameter: data dan nama fail. Kaedah mengeksport Excel ini dibina berdasarkan xlsx.js, jadi anda perlu memasang xlsx.js sebelum anda boleh menggunakan kaedahnya.

Langkah 3: Panggil kaedah eksport Excel

Dalam kod perniagaan tertentu, anda hanya perlu memanggil kaedah eksport Excel yang terkandung dalam kapsul sahaja. Sebagai contoh, kod berikut menunjukkan cara mengeksport tatasusunan ke fail 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 Summary

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular, tetapi ia menggunakan. fail binari Aksara bercelaru cenderung berlaku apabila mengeksport fail Excel. Untuk menyelesaikan masalah ini, anda boleh menggunakan aliran fail sebagai media perantaraan dan menggunakan format pengekodan fail Excel yang ditentukan untuk memastikan ketepatan data. Melalui langkah di atas, kami boleh menyelesaikan masalah fail Excel bercelaru yang dieksport oleh Vue.js dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah aksara bercelaru apabila mengeksport Excel dengan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!