tnblog
首页
视频
资源
登录

uniapp文档在线浏览,pdf,excel,word等

2868人阅读 2024/1/24 16:45 总访问:845023 评论:0 收藏:0 手机
分类: 前端

示例代码

  1. uni.downloadFile({
  2. url: 'https://example.com/somefile.pdf',
  3. success: function (res) {
  4. var filePath = res.tempFilePath;
  5. uni.openDocument({
  6. filePath: filePath,
  7. showMenu: true,
  8. success: function (res) {
  9. console.log('打开文档成功');
  10. }
  11. });
  12. }
  13. });

常见问题

打不开的问题
  1. 文件地址须保证能正常打开,在浏览器中尝试是否能预览或正常下载
  2. 注意文件名最好为数字字母不是中文
真机调试可以打开,体验版没反应:

1.小程序后台-开发设置中-设置downloadFile合法域名,文件访问地址的域名

文件名是一长串字符,可能需要设置一下文件名

1:

  1. filePath: uni.env.USER_DATA_PATH + "/" + "隐私协议.docx", //设置文件名

2:

  1. var filePath = res.filePath || res.tempFilePath

官方文档

https://uniapp.dcloud.net.cn/api/file/file.html#opendocument


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uniapp APP开发基础

前言uniapp是基于vue.js实现的,代码实现方法不能用jQuery的思路去解决问题,基本使用template: 模板view: 视图,使用时把v...

uniapp页面跳转传递参数过长

前言页面传递参数过长如果需要传递的参数content过长,传递的时候会有问题所以使用encodeURIComponent来传递uni.navigateTo...

uniapp webview跳转到app内部页面

官方文档:https://ask.dcloud.net.cn/article/35083相关问题:https://ask.dcloud.net.cn/question/93777引入需要的Js:&lt...

uniapp中webview跳转到app内部页面

官方文档:https://ask.dcloud.net.cn/article/35083第一步:在webview加载的页面引入Js<!--uni的SDK,必须引用。-->...

uniapp返回上一级页面刷新页面

当前页面: //uniapp返回上一级页面刷新页面 let pages = getCurrentPages(); // 当前页面 let beforePage ...

uniapp uni.navigateBack无法返回

注意测试的时候,不要直接打开当前页进行测试。要从其他页面点进去在返回测试。不然你获取上一页是没有的,就会报错。

uniapp确认提示框

代码如下: uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: fun...

uni-app 微信小程序 上传图片文件,uniapp。uni-file-picker 和数据一起上传图片,上传图片的时候携带数据。多图上传

[TOC]uni-app中上传图片可以使用方法uni.uploadFileuni.uploadFile官方文档:https://uniapp.dcloud.net.cn/api/request/ne...

uniapp预览图片详解

一、预览图片的基本用法在uniapp中,我们可以使用uni.previewImage()API对图片进行预览,具体使用方法如下: uni.previewI...

uniapp 微信小程序 上传图片,上传文件,上传视频,上传组件封装

上传图片文件还可以参考:https://www.tnblog.net/aojiancc2/article/details/8233 这个里边有关于.net6实现图片上传后端的...

uniapp vue3 引用样式表样式

这样即可: <style scoped lang="scss"> @import '@/static/css/report-box.scss'; </style...

uniapp 离线打包配置

下载Android Studio 并配置好JavaSDK查看HBuilderX版本然后去下载对应的SDK版本https://pan.baidu.com/s/1ZYxRVH23EbldPQqO...

uniapp 离线打包配置高德地图

没有申请key的去高德开放平台申请的Android平台Keyhttps://console.amap.com/dev/key/app SHA1 在前面申请云端证书里面找 ...

uniapp 应用热更新,进度条/权限

/** * 检查安装应用权限 */ checkInstallPermission() { return new Promise((resolve, reject) => { tr...

uniapp plus.runtime.install 安装失败

APP 权限配置添加"<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/&g...
这一生多幸运赶上过你.
排名
8
文章
230
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术