图⽚.png
⾸先将下载后的⽂件中的css和js提取出来放到前端项⽬的static⽬录下⾯，如下图：
图⽚.png
图⽚.png
vue element admin4.代码实现
思路如下：
4.1定义div 承载spreadjs的 canvas 视图
<div ref="excelView" id="excelView" :></div>
4.2在default对象中初始化spread和excelIo对象，并在mounted⽣命周期函数中初始化，代码结构见图⽚1：
图⽚1.png
4.3 定义⽂件上传组件，可采⽤ivew的上传组件或定义原⽣的 <input type="file"/>，本⽂采⽤的是原⽣的html⽂件上传
注：不要采⽤vue-element的上传组件，因为获取到的⽂件对象类型不适配spreadjs 格式要求，请⾃⾏console打印查看效果
4.4 构建FormData对象，将⽂件以及⽂件名称附加进去，并通过axios上传到后台指定⽅法中，代码见图⼆：
图⼆.png
4.5 编写后台代码接收前台传递的⽂件，并存档到⽂件服务器且在关系型数据库中添加标记，记录⽂件在服务器的路径整体前端代码如下：
<template xmlns="/1999/html" xmlns:v-on="/1999/xhtml">
<div class="app-container pull-auto">
<basic-container>
<div class="filter-container crud-menu">
<div class="crud-menu_left">
<input type="file" class="form-control" id="upload_file" name="upload_file" accept=".xlsx"
@change='changeExcel'>
<Input placeholder="请选择⽂件..." v-model="fileName" id="upload_file_tmp"
onclick="upload_file.click();" readonly/>
<Button type="primary" icon="md-arrow-round-up" @click="selectExcel">浏览</Button>
<Button type="primary" icon="md-arrow-round-down" @click="saveExcel">导出</Button>
<Button type="primary" icon="ios-egg" @click="saveTemplate">保存模板</Button>
</div>
</div>
<div ref="excelView" id="excelView" :></div>
</basic-container>
</div>
</template>
<style scoped>
</style>
<script>
import axios from '@/router/axios'
export default {
data () {
return {
fileName: "",
excelIo: {},
spread: {},
spreadStyle: {
width: '100%',
height: '430px'
}
};
},
mounted () {
this.spread = new GC.Spread.Sheets.ElementById("excelView"), {sheetCount: 1});
},
methods: {
//上传EXCEL
upExcel(){
var excelFile = ElementById("upload_file").files[0];
var workbookObj = json;
this.spread.fromJSON(workbookObj);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。