How to solve the problem of garbled characters when exporting Excel with Vue.js

Vue.js is a popular front-end JavaScript framework. In Vue.js development, when using binary files to export Excel files, you may encounter the problem of Excel garbled characters. This article will help you solve the problem of garbled characters when exporting Excel with Vue.js by introducing the concept and solutions of binary encoding.

1. Binary coding

Binary coding is a very important concept in computers. Here is a brief introduction. Data in computers are stored in binary numbers. Binary numbers only consist of 0 and 1. Each binary number represents a weight. For example, the decimal number 123 can be represented as 1111011 in binary, where the weights of each binary digit are 1, 2, 4, 8, 16, 32, and 64 respectively. This method of representing numbers using binary numbers is called binary encoding.

2. Binary encoding and Excel garbled code problem

In Vue.js, if you use binary encoding to export Excel files, you are likely to encounter garbled code problems. The specific reason is that binary encoding may be mistaken by the parser for other encoding formats, such as UTF-8 encoding or GBK encoding. This misrecognition results in garbled Excel files because Excel requires a specific encoding format to display and parse the data correctly.

3. Solution

In order to solve the problem of garbled Excel files exported by Vue.js, we can use file streams as intermediate media to ensure the correctness of the data by specifying the encoding format of the Excel file. . Here are the specific solutions.

Step one: Install dependencies

Open the terminal in the root directory of the Vue.js project and execute the following command to install the required dependencies:

npm install file-saver script-loader -S

Second Step: Encapsulate the method of exporting Excel

In the appropriate location of the Vue.js application, define a method that can export the Excel file:

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

The above code encapsulates a method named exportExcel function, this function receives two parameters: data and file name. This method of exporting Excel is built based on xlsx.js, so you need to install xlsx.js before you can use its method.

Step 3: Call the export Excel method

In the specific business code, you only need to call the export Excel method just encapsulated. For example, the following code demonstrates how to export an array to an Excel file:

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 is a popular front-end JavaScript framework, but when using binary files to export Excel Garbled characters are prone to occur when using files. To solve this problem, you can use file streams as intermediate media and use the specified Excel file encoding format to ensure the correctness of the data. Through the above steps, we can easily solve the problem of garbled Excel files exported by Vue.js.

The above is the detailed content of How to solve the problem of garbled characters when exporting Excel with Vue.js. For more information, please follow other related articles on the PHP Chinese website!