vue-json-excel使用方法excelの詳細と実際の操作を導出し、分かりやすくする


vue-json-excelの具体的な使用方法
1インストール
npm install vue-json-excel -S
2 main.jsに登録して使用する
import JsonExcel from ‘vue-json-excel’ Vue.component(‘downloadExcel’, JsonExcel);
3ページでの使用
<download-excel
    class = "export-excel-wrapper"
    :data = "dataList"
    :fields = "fieldsList"
    name = "filename.xls">
    <!--             ,         button -->
    <!-- <el-button type="primary" size="small">  EXCEL</el-button> -->
</download-excel>

具体的なapiの使用1.dataタイプ:Arrayがエクスポートするデータ、中国語2.fieldsタイプをサポート:object定義データをエクスポートするフィールド3.nameタイプ:Stingエクスポートファイルの名前4.typeタイプ:Stringエクスポートファイルのタイプデフォルトxsl 5 export-fields(exportFields):objectは可変フィールドを使用する他のコンポーネント(vee-validateなど)を解決するために使用されますという形式のものになります.exportFieldsの動作原理は、フィールド6.headerヘッダが値タイプStringまたはlist 7 footerフッターに対して複数の値データを送信できるフッターに似ています.1つの文字列(1つのフッター)または1つの文字列配列(複数のフッター)であってもよい.8 default-value(defaultValue)タイプStringフィールドに値がない場合、デフォルト値9.worksheetタイプStringワークシートタブの名前デフォルトsheet 1 10.fetchにコールバックします.ダウンロード前にデータを取得する11.before-generateデータを生成/取得する前にコールバックしてメソッドを呼び出す12.before-finishダウンロードボックスがポップアップする前にコールバックしてメソッドを呼び出す.たとえば、ロードの進捗を非表示にする13.stringifyLongNum文字列化長整数と10進数(デジタル精度の損失を解決する問題)、デフォルト値:false
実際の使用
<download-excel
        class = "export-excel-wrapper"
        :data = "reportList"
        :fields = "json_fields"
        :title="titleList"
        :footer="excelFooter"
        :default-value="defaultValue"
        name = "             .xls">
        <!--             ,         button -->
        <el-button type="primary" size="mini" @click="importExcel">  EXCEL</el-button>
  //   Excel   
      json_fields: {
     
        "    ": "column1",    //    
        "   ": "column2", //      
        "    ":"column3",
        "     ":"column4",
        "        ":"column5",
        "        ":"column6",
        "     ":"column7",
        "     ":"column8",
        "    ":"column9",

      },
 //     
      json_meta: [
        [
          {
     
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ],
//       
      titleList:[
      ],
// Excel   
      excelFooter:'',