vue elementui 匯出excel
阿新 • • 發佈：2021-08-20
1、命令執行
npm install vue-json-excel
2、ts 引用
import JsonExcel from "vue-json-excel"; @Component({ name: 'tc-actual-production', template: require('./productionActual.template.html'), components: {pagination, 'download-excel':JsonExcel } })
3、html
<download-excel class= "export-excel-wrapper" :data = "json_data" :fields = "json_fields" header="生產實績統計" name = "生產實績統計.xls"> <el-button type="primary" size="small">匯出EXCEL</el-button> </download-excel>
如果放在 其他按鈕後面，需要和其他按鈕一排，只需要設定 display：inline 就可以了
4、ts
設定兩個變數的值：
json_fields：列名
json_data：資料
json_fields:any={ '列名1': "col1", '列名2': "col2", '列名3': "col3" } json_data:any[]= [{ 'col1': "內容1", 'col2': "內容2", 'col3': "內容3" }]
效果：
元件文件：
| Name | Type | Description | Default |
|---|---|---|---|
| data | Array | Data to be exported. | |
| fields | Object | Fields inside the JSON Object that you want to export. If none provided, all properties in the JSON will be exported. | |
| export-fields (exportFields) | Object | Used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields | |
| type | string | Mime type [xls, csv] | xls |
| name | string | File name to export. | data.xls |
| header | string/Array | Title(s) for the data. Can be a string (one title) or an array of strings (multiple titles). | |
| title(deprecated) | string/Array | same as header, title is maintained for retro-compatibility purposes but its use is not recommended due to the conflict with the HTML5 title attribute. | |
| footer | string/Array | Footer(s) for the data. Can be a string (one footer) or an array of strings (multiple footers). | |
| default-value (defaultValue) | string | Use as fallback when the row has no field values. | '' |
| worksheet | string | Name of the worksheet tab. | 'Sheet1' |
| fetch | Function | Callback to fetch data before download, if it's set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined. |
|
| before-generate | Function | Callback to call a method right before the generate / fetch data, eg:show loading progress | |
| before-finish | Function | Callback to call a method right before the download box pops out, eg:hide loading progress | |
| stringifyLongNum | Boolean | stringify long number and decimal(solve the problem of loss of digital accuracy), default: false | |
| escapeCsv | Boolean | This escapes CSV values in order to fix some excel problems with number fields. But this will wrap every csv data with="and", to avoid that you have to set this prop to false. default: True |