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

目录

• 前言
• 方法一：web-view组件打开外部网页
• • web-view标签介绍
  • 使用过程
  • 使用结果
• 方法二：通过上传钉盘来预览文件
• • 使用结果

前言

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

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

web-view标签介绍

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

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

标签属性：

使用过程

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-tokendd.httpRequest({url: 'https://oapi.dingtalk.com/gettoken?appkey='在小程序应用信息里面查找'&appsecret='在小程序应用信息里面查找'',method: 'GET',success: (res) => {_this.access_token = res.data.access_tokendd.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文档等一系列问题
这文章来写的，可以正常上传预览文件，但是有个问题就是，每次打开这个页面都要存一遍钉盘才能预览文件，我想着如果能拿到存放的位置信息，用户退出之后能自动删除这个文件也可以，但是我翻遍了开放文档也没有找到提供获取钉盘对应文件的接口，而且这样用户每次打开文档都需要下载，耗时耗流量，体验感极差。。。

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！