vueエクスポートダウンロードexcel

xlsx-styleを使用してテーブルをエクスポートし、excelファイルとしてダウンロードし、スタイルを変更します.
1、依存パッケージを3つインストール

npm install -S file-saver
npm install -S xlsx-style
 npm install -S xlsx
 npm install -D script-loader

2.プロジェクトにフォルダを作成する(例えばvendor、一般的にsrcディレクトリの下に作成する)Blob.jsとExport 2 Excel.jsとcpexcel.jsの3つのフォルダを新しいフォルダに入れる.
注意:xlsx-styleプラグインではdist/cpexcel.jsに問題があり、起動時にエラーが発生するためvendor/cpexcel.jsで置き換える必要があります(ここではbuildでmodifyXlsx.jsを追加し、webpack.base.conf.jsで実行し、nodeで置き換えを実現します).
まずgithub上のvendorディレクトリの下の内容をローカルファイルにコピーします.次に、修正して調製します.

//modifyXlsx.js
//  :  vendor  cpexcel.js modules_node xlsx-style/dist/cpexcel.js 
var fs = require('fs');
function copyIt(from, to) {
  console.log("-------  cpexcel.js---------")
  fs.writeFileSync(to, fs.readFileSync(from));
}

module.exports = {
  copyIt
}


//webpack.base.conf.js
//add           
const ModifyXlsx = require('./modifyXlsx.js');
let fromPath = path.resolve(__dirname,'../src/vendor/cpexcel.js'),
    toPath = path.resolve(__dirname,'../node_modules/xlsx-style/dist/cpexcel.js');
ModifyXlsx.copyIt(fromPath,toPath);

3,ページでExport 2 Excel.jsを使用すると、2つのインタフェースexport_が露出します.table_to_Excelとexport_json_to_Excel、私たちはよくexportを使います.json_to_excel.

//     ,      
 handleDownload(){
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/vendor/Export2Excel')    //  
    const tHeader = ['  ', '  ', '  ','  ']
    const filterVal = ['name', 'chinese', 'math','english']
    const list = this.tableData
    const data = this.formatJson(filterVal, list)
    export_json_to_excel(tHeader, data, '   ')            //    
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

参照リンク:https://www.cnblogs.com/qiu-Ann/p/7743897.html demoアドレス:https://github.com/yiyueqinghui/exportExcel xlsx-styleドキュメント:https://www.npmjs.com/package/xlsx-style