要实现用户导出分页列表数据之后的Excel 并且可以发送及预览功能:
实现方法1:
思路 : 先调用服务器接口,一个返回流的接口之后再用微信官方API接口进行写入文件操作保存指定位置之后进行文档打开预览
实现方法2:
思路 : 先调用服务器接口,一个返回写入文件之后返回保存文件的下载目录URL的接口,之后再用微信官方API接口进行下载操作,下载完成后生成临时缓存目录,保存文件,操作保存指定位置之后进行文档打开预览
以上后端接口都先对列表内容进行读取保存到指定.xls 文件中,需要返回流操作的再次读取返回byte数组或者保存的路径
Excel后端生成插件
官方接口主要有一下几个:
(Object object)
保存文件到本地。注意:saveFile 会把临时文件移动,因此调用成功后传入的 tempFilePath 将不可用
参数
Object object
属性 类型 默认值 必填 说明
tempFilePath string 是 需要保存的文件的临时路径 (本地路径)
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
(Object object)
注意: 新开页面打开文档。微信客户端 7.0.12 版本前默认显示右上角菜单按钮,之后的版本默认不显示,需主动传入 showMenu。
参数
Object object
属性 类型 默认值 必填 说明 最低版本
filePath string 是 文件路径 (本地路径) ,可通过 downloadFile 获得
showMenu boolean false 否 是否显示右上角菜单 2.11.0
fileType string 否 文件类型,指定文件类型打开文件 1.4.0
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
(Object object)
(Object object)
写文件
参数
Object object
属性 类型 默认值 必填 说明
filePath string 是 要写入的文件路径 (本地路径)
data string/ArrayBuffer 是 要写入的文本或二进制数据
encoding string utf8 否 指定写入文件的字符编码
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
相关代码:
方法1:
-
获取流再导出
-
({
-
-
url: config.BASE_URL + , //"/api/ManageBaseDataApp/ExportManageData",
-
data: (res),
-
header: {
-
"content-type": "application/json",
-
'Authorization': `bearer ${("access_token")}`
-
},
-
method: "POST",
-
dataType: "json",
-
responseType: "arraybuffer", //注意这里的responseType
-
success: (result) => {
-
("下载成功!", result);
-
-
var fileManager = ();
-
var FilePath = .USER_DATA_PATH + "/" + new Date().getTime()+".xls";
-
({
-
data: result.data,
-
filePath: FilePath,
-
encoding: "binary", //编码方式
-
success: result => {
-
({ //我这里成功之后直接打开
-
filePath: FilePath,
-
showMenu:true,
-
fileType: "xls",
-
success: result => {
-
("打开文档成功");
-
},
-
fail: err => {
-
("打开文档失败", err);
-
}
-
});
-
();
-
},
-
fail: res => {
-
({
-
title: '导出失败!',
-
icon: 'none', //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
-
duration: 2000, //停留时间
-
})
-
(res);
-
}
-
})
-
()
-
},
-
fail(err) {
-
(err)
-
()
-
}
-
-
})
方法2:
-
//先下载URL再导出
-
var url = // "/api/ManageBaseDataApp/ExportManageUrl",
-
-
var data = (resData)
-
(url, data, null).then(result => {
-
if ( == 200 && result.data != "") {
-
("获取URL成功!", result);
-
var downLoadUrl = config.BASE_URL + result.data
-
var fileManager = ();
-
var FilePath = .USER_DATA_PATH + "/" + new Date().getTime() + ".xls";
-
("开始下载。。", result);
-
({
-
url: downLoadUrl,
-
header: {},
-
success: function (dres) {
-
("下载成功!");
-
var tempFilePath =
-
('临时文件下载地址是:' + tempFilePath)
-
("下载地址", config.BASE_URL + '/App_Data/')
-
var FilePath = .USER_DATA_PATH + "/" + new Date().toLocaleDateString() + "";
-
({
-
tempFilePath: tempFilePath,
-
success: function (sres) {
-
()
-
("保存成功,地址!", sres)
-
var saveFilePath =
-
// var saveFilePath = FilePath
-
({
-
filePath: saveFilePath,
-
showMenu: true, // 必须写新开页面打开文档。微信客户端 7.0.12 版本前默认显示右上角菜单按钮,之后的版本默认不显示,需主动传入 showMenu
-
fileType: "xls",
-
//就是之前的那个saveFilePath
-
success: function (ores) {
-
("打开成功!", ores)
-
}
-
})
-
-
},//可以将saveFilePath写入到页面数据中
-
fail: function (err) {
-
({
-
title: '导出失败!',
-
icon: 'none',
-
duration: 1000,
-
})
-
("打开失败!", err)
-
},
-
complete: function (res) {
-
('complete后的res数据:')
-
},
-
}) //,
-
},
-
fail: function (res) {
-
({
-
title: '导出失败!',
-
icon: 'none',
-
duration: 1000,
-
})
-
()
-
},
-
complete: function (res) { () },
-
})
-
-
}
-
}).catch(err => {
-
({
-
title: '导出失败!',
-
icon: 'none',
-
duration: 1000,
-
})
-
("导出失败!", err)
-
})
后端代码: 参考第二篇文章 /andy5520/article/details/106521240
以上第一种方法优缺点 :打开预览文件只能使用wps手机版 ,第二种浏览器wps均可。
以上有什么疑问的也可以私聊我!原创转载的话请注明出处谢谢!