vue-json-excel使用方法excelの詳細と実際の操作を導出し、分かりやすくする
8149 ワード
vue-json-excelの具体的な使用方法
1インストール
npm install vue-json-excel -S
2 main.jsに登録して使用する
import JsonExcel from ‘vue-json-excel’ Vue.component(‘downloadExcel’, JsonExcel);
3ページでの使用
具体的な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
実際の使用
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:'',