Vue에서 json 데이터를 Excel 스프레드시트로 내보내는 방법

이 글에서는 Vue가 json 데이터를 Excel 스프레드시트로 내보내는 예시를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 살펴보겠습니다

온라인에서 많은 문서를 읽었지만 불완전하다고 느꼈기 때문에 여기에 완전하고 상세한 튜토리얼을 작성하겠습니다.

1. 종속성 설치(기본적으로 이전과 동일)

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

2. 두 개의 필수 js 파일인 Blob.js 및 Import2Excel.js를 다운로드합니다.

여기에 다운로드 주소를 게시하세요:

Export2Exce_jb51.rar

3. src 디렉터리에 새 공급업체 폴더를 만들고 그 안에 Blob.js 및 Import2Excel.js를 넣습니다.

4. webpack.base.conf.js 구성을 변경하세요

Resolve의 별칭:

'vendor': path.resolve(__dirname, '../src/vendor')

Fif.vue 파일

스크립트 섹션

data(){
 return{
  list:[
    {
     name:'韩版设计时尚风衣大',
     number:'MPM00112',
     salePrice:'￥999.00',
     stocknums:3423,
     salesnums:3423,
     sharenums:3423,
   },
   {
     name:'韩版设计时尚风衣大',
     number:'MPM00112',
     salePrice:'￥999.00',
     stocknums:3423,
     salesnums:3423,
     sharenums:3423,
   },
  ]
 }

methods:{
  formatJson(filterVal, jsonData) {
  　　　　return jsonData.map(v => filterVal.map(j => v[j]))
  　　},
  export2Excel() {
  　　　　require.ensure([], () => {
  　　　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel');
  　　　　　　const tHeader = ['商品名称','商品货号','售价','库存','销量','分享',];
  　　　　　　const filterVal = ['name', 'number', 'salePrice', 'stocknums', 'salesnums', 'sharenums', ];
  　　　　　　const list = this.goodsItems;
  　　　　　　const data = this.formatJson(filterVal, list);
  　　　　　　export_json_to_excel(tHeader, data, '商品管理列表');
  　　　　})
  　 }
}

템플릿:

<button @click="export2Excel">导出</button>

다음은 설명입니다. .export2Excel()에 필요한 경로는 개인 프로젝트 구조가 다르기 때문에 개별적으로 조정해야 할 수 있습니다. '../../Export2Excel.js' 모듈을 찾을 수 없다는 등의 보고서가 보고되면 경로를 직접 수정하십시오.

2. tHeader는 각 열의 이름이며 수동으로 입력해야 합니다.

3. filterVal은 데이터에 있는 목록의 핵심 값이며 직접 작성해야 합니다.

4. 여기 데이터의 목록 이름이 일치해야 합니다.

5. 여기에서 내보낸 Excel 파일의 이름을 정의할 수 있습니다.

위 내용은 제가 편집한 것입니다. 그것이 미래에 당신에게 도움이 되기를 바랍니다.

관련 기사:

Vue의 디버깅 도구 vue-devtools 정보(자세한 튜토리얼)

Vue를 사용하여 통합 Iframe 페이지를 구현하는 방법

vue의 믹스인에 대한 자세한 해석

위 내용은 Vue에서 json 데이터를 Excel 스프레드시트로 내보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!