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 구성을 변경합니다

해결 별칭:

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

5번째.vue 파일

script 섹션

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>

여기에 몇 가지 설명이 있습니다:

1. '../../' 모듈을 찾을 수 없다고 보고하는 경우,export2Excel()의 필수 경로를 별도로 조정해야 할 수 있습니다. Import2Excel.js' 등 경로를 직접 수정해 주세요.

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

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

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

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

PHP 내보내기 EXCEL Rapid Development 가이드

php는 기본 방법을 사용하여 Excel 인스턴스 공유를 내보냅니다.

jquery 데이터를 Excel 코드 예제로 내보냅니다. 자세한 설명

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