APICloud 实现文档下载和预览功能

简介: 文档下载是很多app,尤其是企业应用中常用的功能。使用APICloud开发app时,可以使用api.download方法实现下载;预览文档可以使用superFile 模块。superFile 模块封装了基于腾讯浏览服务TBS,使用X5Webkit内核,实现文件的展示功能,支持多种文件格式(PDF、Word、Execl、TXT、PPT)。

文档下载是很多app,尤其是企业应用中常用的功能。使用APICloud开发app时,可以使用api.download方法实现下载;预览文档可以使用superFile 模块。superFile 模块封装了基于腾讯浏览服务TBS,使用X5Webkit内核,实现文件的展示功能,支持多种文件格式(PDF、Word、Execl、TXT、PPT)。

 

在项目中添加superFile模块:

1.png

 

然后编译自定义loader ,把自定义loader 安装包安装到手机上,然后就可以使用APICloud Studio3 wifi 同步功能,把代码同步到自定义loader 中进行调试。 参考教程: https://docs.apicloud.com/Dev-Guide/Custom_Loader

 

实例代码如下:

<template>
  <safe-area>
    <scroll-view class="main" scroll-y>
      <view><text onclick='this.downloadDoc_open'>下载并打开文档</text></view>
    </scroll-view>
  </safe-area>
</template>
<style>
.main {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
<script>
export default {
  name: 'test',
  data() {
    return {
    }
  },
  apiready() {
  },
  methods: {
    downloadDoc_open() {
      api.download({
        url: '',  // 填写要下载文档的url
        savePath: 'fs://myapp/test.doc',
        report: true,
        cache: true,
        allowResume: true
      }, function (ret, err) {
        if (ret.state == 1) {
          //下载成功
          console.log(JSON.stringify(ret));
          if (api.systemType == 'ios') {
            // ios  不需要初始化,直接open
            var superFile = api.require('superFile');
            superFile.open({
              path: ret.savePath,
            })
          }
          if (api.systemType == 'android') {
            console.log(2);
            var superFile = api.require('superFile');
            superFile.init(function (ret) {
              if (ret.eventType == 'onViewInitFinished') {
                superFile.open({
                  path: ret.savePath
                })
              }
            });
          }
        }
      });
    }
  }
}
</script>

image.gif

目录
相关文章
|
6月前
|
存储
若依框架 --- pdf文件上传预览功能实现
若依框架 --- pdf文件上传预览功能实现
308 0
|
API
【工具推荐】 Obsidian 插件 Obsidian to Flomo 一键同步内容到 Flomo 插件
Obsidian to Flomo 是一款可以一键发送内容到 Flomo 的Obsidian 插件。
807 0
|
11天前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
5月前
|
移动开发 JavaScript 前端开发
必知的技术知识:JqueryMedia插件使用,解决在线预览及打开PDF文件
必知的技术知识:JqueryMedia插件使用,解决在线预览及打开PDF文件
|
6月前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
149 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
12月前
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
435 0
|
小程序
微信小程序如何实现多图上传及预览删除
微信小程序如何实现多图上传及预览删除
120 0
|
Web App开发 移动开发 前端开发
PDF 预览和下载你是怎么实现的?(下)
PDF 预览和下载你是怎么实现的?
662 0
|
iOS开发 开发者 索引
批量上传iOS应用程序截图的实用技巧
提交iOS应用程序截图到iTunes Connect是一项非常繁琐的任务,因为你必须上传多达数十张屏幕截图,这是一个重复而枯燥的过程。但是,我们有一个好消息要告诉开发者们,现在有一个工具可以帮助你批量上传,方便快捷。
|
Web App开发 移动开发 前端开发
PDF 预览和下载你是怎么实现的?(上)
PDF 预览和下载你是怎么实现的?
365 0