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

这篇具有很好参考价值的文章主要介绍了【钉钉小程序】钉钉小程序预览文件的两种方式,从获取权限到预览文件全过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近写钉钉小程序项目过程中,要实现页面展示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官网中下载稳定版本的插件,放在静态资源包中。

钉钉小程序预览pdf,小程序/APP,小程序,钉钉,javascript

2、接口白名单:

在对应的小程序信息界面配置需要打开的pdf安全域名地址,注意配置的是Webview安全域名。
钉钉小程序预览pdf,小程序/APP,小程序,钉钉,javascript

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

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

如有误,请指正!如有最优解法,欢迎评论留言!文章来源地址https://www.toymoban.com/news/detail-615199.html

到了这里,关于【钉钉小程序】钉钉小程序预览文件的两种方式,从获取权限到预览文件全过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React下载文件的两种方式

    React下载文件的两种方式 - 代码先锋网 不知道有用没用看着挺整齐  没试过

    2024年02月12日
    浏览(38)
  • MyBatis中获取参数值的两种方式:${} 和 #{},以及它们之间区别是什么?

    ${}:的本质就是字符串拼接 #{}:的本质就是占位符赋值 ① 使用${}占位符,在字符串拼接的方式拼接sql,若为字符串类型或为日期类型的字段进行赋值时,需要手动加单引号 ② 使用#{}占位符赋值的方式拼接sql,此时为字符串类型或日期类型的字段进行赋值时,自动添加单引

    2024年02月04日
    浏览(43)
  • vue前端实现上传文件的两种方式

    1.使用form表单的形式 第一种方式就是使用FormData的方式进行上传 html代码: JS代码: 2.使用element-ui的el-upload的方式进行上传 这里我是根据需求封装了一个组件

    2024年02月11日
    浏览(40)
  • 开发钉钉小程序

    本来开始打算、从原生开始入手的,可是生态太差了,几乎搜不到啥有用的内容;但是它的老大哥支付宝小程序生态就不错,毕竟它们两个都用一个开发者工具,万分纠结之下,朋友强力安利我uniapp开发钉钉小程序,说是有很多不错的组件,你刚学的vue 和 vuex就可以用上了,

    2024年02月11日
    浏览(44)
  • Spring Boot实现文件上传的两种方式

    最近的一个小项目里使用到了文件上传、下载功能,今天我打算梳理一下文件上传所涉及的技术及实现。 内容主要包括两部分,如何通过纯 Servlet 的形式进行文件上传、保存(不通过 Spring 框架);另一部分是如何在 Spring Web MVC 中进行文件上传。 HTTP 协议传输文件一般都遵循

    2024年02月05日
    浏览(47)
  • 钉钉小程序无法关联应用

    钉钉小程序无法关联应用 后台创建了新的应用 钉钉小程序开发者工具企业内部应用关联应用 没有下拉列表 无法关联,只能点击新增按钮,重新进入后台 很奇怪,明明创建好了应用,为什么关联下拉列表没有这个应用呢? 创建应用还不够,需要添加应用能力 应用能力添加应

    2024年02月21日
    浏览(48)
  • uniapp运行钉钉小程序

    因项目原因,公司需要在钉钉里面开发小程序。之前用uniapp开发过app,H5,小程序。还真没尝试过钉钉小程序,今天就简单的记录下uniapp运行钉钉小程序中的过程。 在项目目录新建package.json文件,在文件中添加如下代码: 这样在项目目录中unpackage文件下生成支付宝的项目文件

    2024年04月25日
    浏览(40)
  • 用Python获取弹幕的两种方式(一种简单但量少,另一量大管饱)

    弹幕可以给观众一种“实时互动”的错觉,虽然不同弹幕的发送时间有所区别,但是其只会在视频中特定的一个时间点出现,因此在相同时刻发送的弹幕基本上也具有相同的主题,在参与评论时就会有与其他观众同时评论的错觉。 在国内的视频网站里,弹幕先是从A站被大家

    2023年04月27日
    浏览(36)
  • 钉钉小程序的开发入门【亲自调试】

    一、创建应用 在本部分,你将在开发者后台创建一个小程序应用,并完成基础配置。 登录钉钉开发者后台 在开发者后台页面,选择企业内部开发,然后单击创建应用。  3、在弹出的创建应用页面中填写基本信息,然后单击 确定创建 。应用类型:选择小程序,开发方式:选

    2024年02月09日
    浏览(72)
  • 钉钉小程序引用阿里巴巴图标

    2.打开的界面如图,先建一个iconfont.acss文件,全选浏览器打开的样式代码,复制粘贴进新建的iconfont.acss文件中 3.使用

    2024年02月11日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包