This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021
The sample
Sample code
Establishing the project
vue init webpack excel-exportBuild excel -exportCD excel - projectexportEnter the excel -exportNPM install depends on NPM run devCopy the code
Exporting Excel key
1. Install dependencies
NPM install -s file-saver Web application NPM install -s XLSX spreadsheet parser NPM install -d script-loader mounts JS globallyCopy the code
2. Add blob. js and Export2Excel
Create a file (vendor) in the SRC directory and add blob.js and Export2Excel. Js. Add a code to Export2Excel. The modified code is 147-155 lines, as follows:
/* Sets the maximum width of each column of the worksheet */
const colWidth = data.map(row= > row.map(val= > {
/* Check whether the value is null/undefined*/
if (val == null) {
return { 'wch': 10 };
}
/* Check whether it is Chinese */
else if (val.toString().charCodeAt(0) > 255) {
return { 'wch': val.toString().length * 2 + 5 };
} else {
return { 'wch': val.toString().length + 5}; }}))/* starts with the first behavior */
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['! cols'] = result;
Copy the code
3. Configure the loading path
Modify the webpack.base.conf.js file in the build folder to configure the path to load
alias: {
'vue$': 'vue/dist/vue.esm.js'.The '@': resolve('src'),
'vendor': resolve('src/vendor')}Copy the code
Export2Excel. Js reference dependency
In Export2Excel. Js reference dependencies are as follows:
require('./Blob');
require('script-loader! file-saver');
require('script-loader! xlsx/dist/xlsx.core.min');
Copy the code
Element – the UI
Use the table and button components in element-UI to install dependencies:
npm install -S element-ui
Copy the code
Reference element and its style in main.js:
import Element from 'element-ui' // Introduce element UI
import 'element-ui/lib/theme-chalk/index.css' // Introduce the Element UI style
Vue.use(Element, {
size: 'mini' // set element-ui default size
})
Copy the code
Vue file use
<template>
<div class="hello">
<div>
<el-button
type="primary"
size="mini"
style="margin:30px auto;"
@click="handleDownloadData"
>export</el-button>
<el-table
:data="tableData"
stripe
style="width: 600px; margin:30px auto;"
>
<el-table-column
prop="date"
label="Date"
width="180"
>
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180"
>
</el-table-column>
<el-table-column
prop="address"
label="Address"
>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'excelExport'.data() {
return {
msg: 'Welcome to Your Excel Export'.tableData: [{date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1510 jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-04'.name: 'Li Xiaohu'.address: Lane 1511, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-01'.name: 'Sun Xiaohu'.address: Lane 1512 jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-02'.name: 'Zhu Xiaohu'.address: Lane 1513, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-04'.name: Tiger money.address: Lane 1514, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-01'.name: 'Du Xiaohu'.address: Lane 1515, Jinshajiang Road, Putuo District, Shanghai
},
{
date: '2016-05-03'.name: 'Zhao Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}].tableTitleData: [{label: 'date'.prop: 'date'
},
{
label: 'name'.prop: 'name'
},
{
label: 'address'.prop: 'address'}}},methods: {
// The export method
handleDownloadData() {
// Export table header Settings for the table
let allColumns = this.tableTitleData
var columnNames = []
var columnValues = []
for (var i = 0; i < allColumns.length; i++) {
columnNames[i] = allColumns[i].label
columnValues[i] = allColumns[i].prop
}
require.ensure([], () = > {
const { export_json_to_excel } = require('vendor/Export2Excel')
const tHeader = columnNames
const filterVal = columnValues
const list = this.tableData
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, 'Export Excel list demo')})},formatJson(filterVal, jsonData) {
return jsonData.map(v= > filterVal.map(j= > v[j]))
}
}
}
</script>
Copy the code