Cómo exportar una tabla a una tabla de Excel en un proyecto de Vue

Hay un proyecto que requiere exportar tablas de Excel en el proyecto front-end. Después de revisar el código, se puede implementar Vue.js. Los pasos de implementación específicos son:

Instalar dependencias

.

//npm npm install -S file-saver xlsx

npm install -D script-loader

o

//yarnyarn add file-saver

yarn add xlsx

yarn add script-loader --dev

2 Importar dos JS

Descargar Blob .js y Export2Excel. .js en el directorio src Cree una nueva carpeta de Excel y coloque Blob.js y Export2Excel.js en ella

imagen

**3. Introduzca estos dos archivos JS en main.js**

importar Blob desde './excel/Blob'importar Export2Excel desde './excel/Export2Excel.js'

4 .Usar en el componente

//Método de exportación exportExcel() {

require.ensure([], () =gt; {

const { export_json_to_excel } = require('./excel/Export2Excel');

const tHeader = ['número de serie', 'nickName', 'nombre']

// Configuración superior Encabezado de la primera fila de la tabla de Excel

const filterVal = ['index', 'nickName', 'name']

// El índice, nickName y nombre anteriores son propiedades de tableData; de objetos en

const list = this.tableData; //almacenar tableData de los datos a la lista

const data = this.formatJson(filterVal, list);

export_json_to_excel(tHeader, datos, 'lista excel');

})

},

formatJson(filterVal, jsonData) {

return jsonData.map(v =gt; filterVal.map(j =gt; v[j]))

}

tHeader es el título de la tabla, filterVal en Los datos son el campo de la tabla. tableData guarda los datos de la tabla. El tipo de datos es una matriz que contiene objetos, un objeto para cada fila de la tabla.

Los valores en tableData son:

data() {

return {

tableData:[

{'index': '0', "nickName": "Nuestros viejos tiempos quedaron varados en la playa", "name": "Ming"},

{'index': '1' , "nickName ": "Una mujer noble por naturaleza", "Name": "Xiaohong"},

{'index': '2', "nickName": "El mar es polvo de colores", " Nombre" ："Xiaolan"}

]

}

}