Vue 实现上传下载文件

需求：SpreadJS在Vue框架下如何实现服务端加载sjs、ssjson、xlsx文件

背景：

SpreadJS是一个纯前端的控件，用户可以在前端页面上进行数据的上传、填报等操作，但是最终还是需要将处理的数据进行持久化，SpreadJS是提供下载当前工作簿的功能的，但是将数据持久化在本地会有很多问题，可能造成数据汇报缓慢，数据的汇报遗漏等。而将数据持久化在服务端往往是更优的选择，这样持久化就完美解决了数据汇报缓慢遗漏等问题

解决方案：

在这篇文章中提到了如何SpreadJS + Vue + Axios 实现服务端加载、上传Excel 。

在此基础上，本文将介绍如何实现SpreadJS + Vue + Axios 服务端加载、上传sjs、ssjson以及xlsx文件。

1、在前端页面上，添加一个sjs文件，然后通过以下代码进行加载。

spread.open(file, function () {
   // success callback to do something 
}, function (e) {
   console.log(e); // error callback
});

通过以下代码进行导出

spread.save(function (blob) {
   // save blob to a file
   saveAs(blob, fileName);
}, function (e) {
   console.log(e);
});

同时，在v16版本中，对于导入导出ssjson与xlsx文件，有一个新的api接口：spread.import，spread.export

spread.import(file, function () {
   // success callback to do something
}, function (e) {
   console.log(e); // error callback
}, {
   fileType: GC.Spread.Sheets.FileType.excel
});
spread.export(function (blob) {
   // save blob to a file
   saveAs(blob, fileName);
}, function (e) {
   console.log(e);
}, {
   fileType: GC.Spread.Sheets.FileType.excel,
   includeBindingSource: true
});

以上两种导入接口，第一个参数均为file文件，如果此时不想要前端去上传文件，想从后端获取文件流，然后进行加载，那么可以如下操作

二、本示例用axios获取接口数据：

axios({
        method: "post",
        url: "spread/importFile",
        data: fd,
        responseType: "blob",
        headers: {
          cache: false,
          "Access-Control-Allow-Origin": "*",
          'X-Requested-With': 'XMLHttpRequest',
          crossDomain: true
        }
      }).then(
        response => {},err=>{console.log(err)
});

sjs:

var blob = new Blob([response.data], {type:'application/zip'});
console.time('渲染时间')
this.spread.open(blob,
  function () {
    console.timeEnd('渲染时间')
  },
  function (e) {
    console.log(e)
  },
  {openMode:GC.Spread.Sheets.OpenMode.incremental}
);

ssjson:

var blob = new Blob([response.data], {type:'text/plain;charset=utf-8'});
tempFileType = GC.Spread.Sheets.FileType.ssjson;
options = {
incrementalLoad: {
  loading: function (progress, args) {
    let sheetName = args.sheet.name();
    console.log(progress, sheetName);
  },
  loaded: function () {
    console.timeEnd('渲染时间')
  }
},
fileType: tempFileType
},
}
console.time('渲染时间')
spread.import(blob, function () {}, function (e) {
console.log(e); // error callback
}, options);

xlsx:

var blob = new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
options = {
  openMode:GC.Spread.Sheets.OpenMode.incremental,
  fileType: GC.Spread.Sheets.FileType.excel,
progress: (progressArgs) => {
    console.log(progressArgs)
},
}
console.time('渲染时间')
spread.import(blob, function () {
console.timeEnd('渲染时间')
}, function (e) {
console.log(e); // error callback
}, options);

其前端代码与后端代码见附件。

关于如何使用，见如下动图：

165732sge9q6xqg912k6qc

详细代码可以参考附件：

GCExcelAndSpreadJS_BigWorkbook.zip

axios.zip

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.12.24