이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!