亲测可用!微信小程序实现下载预览文件,导出及保存文件及excel(1)

时间:2024-09-29 20:40:39

要实现用户导出分页列表数据之后的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:

  1. 获取流再导出
  2. ({
  3. url: config.BASE_URL + , //"/api/ManageBaseDataApp/ExportManageData",
  4. data: (res),
  5. header: {
  6. "content-type": "application/json",
  7. 'Authorization': `bearer ${("access_token")}`
  8. },
  9. method: "POST",
  10. dataType: "json",
  11. responseType: "arraybuffer", //注意这里的responseType
  12. success: (result) => {
  13. ("下载成功!", result);
  14. var fileManager = ();
  15. var FilePath = .USER_DATA_PATH + "/" + new Date().getTime()+".xls";
  16. ({
  17. data: result.data,
  18. filePath: FilePath,
  19. encoding: "binary", //编码方式
  20. success: result => {
  21. ({ //我这里成功之后直接打开
  22. filePath: FilePath,
  23. showMenu:true,
  24. fileType: "xls",
  25. success: result => {
  26. ("打开文档成功");
  27. },
  28. fail: err => {
  29. ("打开文档失败", err);
  30. }
  31. });
  32. ();
  33. },
  34. fail: res => {
  35. ({
  36. title: '导出失败!',
  37. icon: 'none', //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
  38. duration: 2000, //停留时间
  39. })
  40. (res);
  41. }
  42. })
  43. ()
  44. },
  45. fail(err) {
  46. (err)
  47. ()
  48. }
  49. })

 

 方法2:

  1. //先下载URL再导出
  2. var url = // "/api/ManageBaseDataApp/ExportManageUrl",
  3. var data = (resData)
  4. (url, data, null).then(result => {
  5. if ( == 200 && result.data != "") {
  6. ("获取URL成功!", result);
  7. var downLoadUrl = config.BASE_URL + result.data
  8. var fileManager = ();
  9. var FilePath = .USER_DATA_PATH + "/" + new Date().getTime() + ".xls";
  10. ("开始下载。。", result);
  11. ({
  12. url: downLoadUrl,
  13. header: {},
  14. success: function (dres) {
  15. ("下载成功!");
  16. var tempFilePath =
  17. ('临时文件下载地址是:' + tempFilePath)
  18. ("下载地址", config.BASE_URL + '/App_Data/')
  19. var FilePath = .USER_DATA_PATH + "/" + new Date().toLocaleDateString() + "";
  20. ({
  21. tempFilePath: tempFilePath,
  22. success: function (sres) {
  23. ()
  24. ("保存成功,地址!", sres)
  25. var saveFilePath =
  26. // var saveFilePath = FilePath
  27. ({
  28. filePath: saveFilePath,
  29. showMenu: true, // 必须写新开页面打开文档。微信客户端 7.0.12 版本前默认显示右上角菜单按钮,之后的版本默认不显示,需主动传入 showMenu
  30. fileType: "xls",
  31. //就是之前的那个saveFilePath
  32. success: function (ores) {
  33. ("打开成功!", ores)
  34. }
  35. })
  36. },//可以将saveFilePath写入到页面数据中
  37. fail: function (err) {
  38. ({
  39. title: '导出失败!',
  40. icon: 'none',
  41. duration: 1000,
  42. })
  43. ("打开失败!", err)
  44. },
  45. complete: function (res) {
  46. ('complete后的res数据:')
  47. },
  48. }) //,
  49. },
  50. fail: function (res) {
  51. ({
  52. title: '导出失败!',
  53. icon: 'none',
  54. duration: 1000,
  55. })
  56. ()
  57. },
  58. complete: function (res) { () },
  59. })
  60. }
  61. }).catch(err => {
  62. ({
  63. title: '导出失败!',
  64. icon: 'none',
  65. duration: 1000,
  66. })
  67. ("导出失败!", err)
  68. })

 后端代码: 参考第二篇文章 /andy5520/article/details/106521240

 

以上第一种方法优缺点 :打开预览文件只能使用wps手机版 ,第二种浏览器wps均可。

以上有什么疑问的也可以私聊我!原创转载的话请注明出处谢谢!