Vue.js로 Excel을 내보낼 때 문자가 깨지는 문제를 해결하는 방법

Vue.js는 널리 사용되는 프런트엔드 JavaScript 프레임워크입니다. Vue.js 개발에서 바이너리 파일을 사용하여 Excel 파일을 내보낼 때 Excel 문자가 깨지는 문제가 발생할 수 있습니다. 이 기사에서는 바이너리 인코딩의 개념과 솔루션을 소개하여 Vue.js로 Excel을 내보낼 때 문자가 깨지는 문제를 해결하는 데 도움을 줄 것입니다.

1. 바이너리 코딩

바이너리 코딩은 컴퓨터에서 매우 중요한 개념입니다. 컴퓨터의 데이터는 이진수로 저장됩니다. 이진수는 0과 1로만 구성됩니다. 각 이진수는 무게를 나타냅니다. 예를 들어, 십진수 123은 이진수로 1111011로 표현될 수 있으며, 여기서 각 이진수의 가중치는 각각 1, 2, 4, 8, 16, 32, 64입니다. 이진수를 사용하여 숫자를 표현하는 방법을 이진 인코딩이라고 합니다.

2. 바이너리 인코딩 및 Excel 깨짐 문제

Vue.js에서 바이너리 인코딩을 사용하여 Excel 파일을 내보내는 경우 문자가 깨질 수 있습니다. 구체적인 이유는 이진 인코딩이 파서에 의해 UTF-8 인코딩 또는 GBK 인코딩과 같은 다른 인코딩 형식으로 오해될 수 있기 때문입니다. Excel에서 데이터를 올바르게 표시하고 구문 분석하려면 특정 인코딩 형식을 사용해야 하기 때문에 이러한 잘못된 인식으로 인해 Excel 파일이 왜곡됩니다.

3. 솔루션

Vue.js에서 내보낸 Excel 파일이 왜곡되는 문제를 해결하기 위해 파일 스트림을 중간 미디어로 사용하여 Excel 파일의 인코딩 형식을 지정하여 데이터의 정확성을 보장할 수 있습니다. 구체적인 해결책은 다음과 같습니다.

1단계: 종속성 설치

Vue.js 프로젝트의 루트 디렉터리에서 터미널을 열고 다음 명령을 실행하여 필요한 종속성을 설치합니다.

npm install file-saver script-loader -S

2단계: Excel을 내보내는 방법을 캡슐화

In Vue. Node.js 애플리케이션에서 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;
}

위 코드는 데이터와 파일 이름이라는 두 가지 매개변수를 받는 exportExcel라는 함수를 캡슐화합니다. 이 Excel 내보내기 방법은 xlsx.js를 기반으로 구축되었으므로 해당 방법을 사용하려면 먼저 xlsx.js를 설치해야 합니다.

3단계: Excel 내보내기 메서드 호출

특정 비즈니스 코드에서는 방금 캡슐화된 Excel 내보내기 메서드만 호출하면 됩니다. 예를 들어, 다음 코드는 배열을 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. 요약

Vue.js는 널리 사용되는 프런트 엔드 JavaScript 프레임워크이지만 바이너리를 사용하여 Excel 파일을 내보낼 때 잘못된 문자가 발생하기 쉽습니다. 파일. 이 문제를 해결하려면 파일 스트림을 중간 미디어로 사용하고 지정된 Excel 파일 인코딩 형식을 사용하여 데이터의 정확성을 보장할 수 있습니다. 위의 단계를 통해 Vue.js로 내보낸 Excel 파일이 왜곡되는 문제를 쉽게 해결할 수 있습니다.

위 내용은 Vue.js로 Excel을 내보낼 때 문자가 깨지는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!