钉钉移动端H5微应用预览文件

前期准备

• 创建 H5 微应用

• 安装并引入 钉钉 SDK

// termial 运行
npm i dingtalk-jsapi -S

// vue2项目中引入并挂载至Vue原型，以 main.js为例
import * as dd from 'dingtalk-jsapi'

Vue.prototype.$dd = dd

• 手机需要安装可以打开 pdf doc excel 文件格式的应用，如 WPS

需求

钉钉移动端 H5微应用，不通过第三方库，实现文件的预览，如 pdf docx excel 文件

代码实现

// 返回值类型是 promise
// 生成一个临时文件路径
this.$dd.downloadFile({
    // 在线 doc docx xlsx xls 文件，可以在搜索栏 filetype:doc 搜索
    url: 'https://www.cup.edu.cn/rwsk/docs/2015-03/20150323164857132134.docx',  
    // url: 'https://yjsy.bjmu.edu.cn/docs/20190705181006659605.doc',  
    // url: 'https://www.xit.edu.cn/web2/dqgcx/UploadFiles_9009/202202/2022022716571956.xlsx',  
    // url: 'https://wap.miit.gov.cn/cms_files/filemanager/oldfile/miit/n1146285/n1146352/n3054355/n3057674/n3057688/n3057691/c3553806/part/3553807.xls',  
    success: (res) => {  
        const { filePath } = res  
        // 根据临时文件路径，打开文件内容
        this.$dd.openDocument({  
            filePath,  
            fileType: 'doc', // pdf、doc、docx、xls、xlsx、ppt、pptx  
            success (res) {  
                console.log('open document success: ', res)  
            },  
            complete (res) {  
                console.log('open document complete: ', res)  
            }  
        })  
    },  
    fail: () => {  
        console.log('fail')  
    }  
}).catch(e => {  
console.log('e: ', e)  
})

• openDocument 方法的 api 的文档，可以在支付宝开放平台 -> 小程序中查看
• 钉钉sdk 中 存在 openDocument 方法，只不过没有更新文档，钉钉研发反馈：可以正常调用

注意事项

• 预览 docx 和 doc 格式文件，filetype 均配置为 doc
• 预览 xlsx 和 xls 格式文件，filetype 均配置为 xls
• PC 端 钉钉，在打开 H5 应用时，预览文件 和 移动端 解决方案不一样。