【钉钉小程序】钉钉小程序预览文件的两种方式,从获取权限到预览文件全过程

前言

最近写钉钉小程序项目过程中,要实现页面展示pdf、word、ppt等文件的功能。在网上搜了很多文章,研究了很久,总结了一下有两种实现该功能的方法,方法一:借助web-view组件打开外部网页;方法二:通过上传到钉盘,从钉盘打开文件。具体过程如下。

方法一:web-view组件打开外部网页

web-view标签介绍

钉钉开放文档-web-view介绍

web-view 组件是一个可以用来承载H5网页的组件,自动铺满整个小程序页面。需要开发者到开发者后台配置渲染H5网页的安全域名。

标签属性:

属性 说明
src web-view 要渲染的H5网页URL。H5网页URL需要登录开发者后台,进行H5域名白名单配置。
onMessage 网页向小程序 postMessage 消息,e.detail = { data }。

使用过程

1、下载pdf.js插件:PDF-JS官网

在pdf.js官网中下载稳定版本的插件,放在静态资源包中。

在这里插入图片描述

2、接口白名单:

在对应的小程序信息界面配置需要打开的pdf安全域名地址,注意配置的是Webview安全域名。
在这里插入图片描述

3、代码展示:

axml代码:

<web-view src="{
     
     {viewerUrl+pdfUrl}}"></web-view>

js代码:

Page({
    
    
	data:{
    
    
		//下载的psf.js插件中的viewer.html路径
		viewerUrl: "/static/pdf/web/viewer.html",
		pdfUrl:"后端返回的接口(需要展示的pdf地址)"
	},
})

使用结果

我是结合uni-app钉钉小程序pdf预览
微信小程序实现PDF预览功能——pdf.js(含源码解析)
这两篇文章来写的,反正我是没有成功应用。。。最接近成功的两步,一个显示网络诊断错误,另一个直接跳转到手机内置浏览器来打开pdf。还有文档说可以在钉钉小程序里内置H5页面来实现,emmmm,打算提个工单问问技术人员。

方法二:通过上传钉盘来预览文件

钉钉开放文档-上传附件到钉盘/从钉盘选择文件

1、获取钉盘审批权限

代码展示:

app.js文件:

onLaunch() {
    
    
	this.getSpaceid()
}
getSpaceid() {
    
    
	dd.getAuthCode({
    
    
      success: function (res) {
    
    
        // 存储 authorCode 
        this.authCode = res.authCode
        // 将方法 getAuthCode 的 this 存储到 _this 中
        let _this = this
        // 根据 appkey 和 appsecret 获取 access-token
        dd.httpRequest({
    
    
          url: 'https://oapi.dingtalk.com/gettoken?appkey='在小程序应用信息里面查找'&appsecret='在小程序应用信息里面查找'',
          method: 'GET',
          success: (res) => {
    
    
            _this.access_token = res.data.access_token
            dd.httpRequest({
    
    
              url: 'https://oapi.dingtalk.com/cspace/get_custom_space?access_token=' + _this.access_token + '&domain='任意10个字节以内的字符串,仅可包含字母和数字'&agent_id='在小程序应用信息里面查找'',
              method: 'GET',
              success: async (res) => {
    
    
                this.spaceid = res.data.spaceid
              }
            })
          }
        })
      },
      fail: function (err) {
    
    
        console.log(err);
      }
    })
},
globalData: {
    
    
    spaceid: ''
  },

2、上传文件

代码展示:

const app = getApp();
Page({
    
    
	data:{
    
    
		info1:'',
		fileId: "",
    	fileName: "",
    	fileSize: "",
    	fileType: "",
    	spaceId: "",
	},
	onLoad(query) {
    
    
		this.setData({
    
    
			info1:query.info1
		})
		this.onFile()
	},
	onFile() {
    
    
	//调用上传文件接口
    dd.saveFileToDingTalk({
    
    
      url: this.data.info1,  // 文件在第三方服务器地址
      name: "文件名",
      success: (res) => {
    
    
        console.log(res.data[0]);
        this.setData({
    
    
          fileId: res.data[0].fileId,
          fileName: res.data[0].fileName,
          fileSize: res.data[0].fileSize,
          fileType: res.data[0].fileType,
          spaceId: res.data[0].spaceId
        })
        //调用预览文件接口
        dd.previewFileInDingTalk({
    
    
          corpId: dd.corpId,
          spaceId: this.data.spaceId,
          fileId: this.data.fileId,
          fileName: this.data.fileName,
          fileSize: this.data.fileSize,
          fileType: this.fileType,
        })
      },
      fail: (err) => {
    
    
        dd.alert({
    
    
          content: JSON.stringify(err)
        })
      }
    })
  },
})

使用结果

我是看钉钉小程序上传预览下载word,pdf文档等一系列问题
这文章来写的,可以正常上传预览文件,但是有个问题就是,每次打开这个页面都要存一遍钉盘才能预览文件,我想着如果能拿到存放的位置信息,用户退出之后能自动删除这个文件也可以,但是我翻遍了开放文档也没有找到提供获取钉盘对应文件的接口,而且这样用户每次打开文档都需要下载,耗时耗流量,体验感极差。。。

最理想的状态是文件能嵌入小程序页面打开,但目前还没找到最优解决方法,先埋个坑,等解决了再跟大家分享!

如有误,请指正!如有最优解法,欢迎评论留言!

猜你喜欢

转载自blog.csdn.net/aDiaoYa_/article/details/131031124