由于项目需要导出Excel，所以测试了两种的方法
第一种：使用vue-json-excel
- 这个库导出数据的时候只能导出为
xls和csv格式，并且由于是通过html强制转换成xls的所以生成的文件打开时会报错，导出后用office打开会提示“文件格式和扩展名不匹配”
所以不建议使用这种方式，直接跳过
第二种：使用js-xlsx
js-xlsx由SheetJS出品的一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。
- 安装xlsx
npm install -S xlsx
- 引入xlsx
import * as xlsx from 'xlsx'
- 导入
Excel转换为json数据
ExcelToJson.vue源码
<template>
<div>
<el-upload
class="upload-demo"
action="/"
:before-upload="beforeUpload"
multiple
:limit="3"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传大小不超过500kb</div>
</el-upload>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="__rowNum__"
label="序号">
</el-table-column>
<el-table-column
prop="wlmc"
label="物料名">
</el-table-column>
<el-table-column
prop="jg"
label="价格">
</el-table-column>
<el-table-column
prop="sl"
label="数量">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { doReadExcelFile } from '@/utils/file.js'
export default {
components: {},
data() {
return {
tableData: [],
fileList:[]
};
},
props: {},
created() {},
mounted() {},
computed: {},
methods: {
async beforeUpload(file){
let data = await doReadExcelFile(file)
this.tableData = data
return false //false不上传文件
}
},
watch: {}
};
</script>
<style lang="scss" scoped>
</style>
utils/readfile.js源码
import * as xlsx from 'xlsx'
export const readFile = (file)=>{
return new Promise(resolve => {
let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = ev => {
resolve(ev.target.result)
}
})
}
export const doReadExcelFile= async (file)=>{
let dataBinary = await readFile(file)
let workBook = xlsx.read(dataBinary, {type: 'binary', cellDates: true})
let workSheet = workBook.Sheets[workBook.SheetNames[0]]
const data = xlsx.utils.sheet_to_json(workSheet)
console.log(data)
return data
}
- 导出
json数据生成Excel文件
源码：
<template>
<div>
<el-button type="success" @click='json2Excel'>导出Excel</el-button>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="wlmc"
label="物料名">
</el-table-column>
<el-table-column
prop="jg"
label="价格">
</el-table-column>
<el-table-column
prop="sl"
label="数量">
</el-table-column>
</el-table>
</div>
</template>
<script>
import * as xlsx from 'xlsx'
export default {
components: {},
data() {
return {
tableData: [{
wlmc: '氯化钠',jg: '10',sl: '100'},
{wlmc: '盐酸',jg: '20',sl: '50'},
{wlmc: '硫酸',jg: '30',sl: '100'},
{wlmc: '蔗糖',jg: '15',sl: '20'}]
};
},
props: {},
created() {},
mounted() {},
computed: {},
methods: {
json2Excel(){
// 创建工作表
let data = xlsx.utils.json_to_sheet(this.tableData);
// 创建工作簿
let wb = xlsx.utils.book_new();
// 将工作表放入工作簿中
xlsx.utils.book_append_sheet(wb, data, 'Sheet1');
// 生成文件并下载
xlsx.writeFile(wb, 'test.xlsx');
}
},
watch: {}
};
</script>
<style lang="scss" scoped>
</style>
若是需要导出后端中的数据可以利用AJAX,fech,Axios等方法获取后端数据，但要注意异步和跨域等问题
