uniapp 开发小程序——点击预览文件

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

1、问题描述:

点击文字-打开文件进行预览:
uniapp 开发小程序——点击预览文件

2、解决:

使用uni.openDocument 新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx。文章来源地址https://www.toymoban.com/news/detail-408838.html

<view class="formwork" @click="openFile()">
	点击查看公司授权书模板展示
</view>

<script>
	//打开文件
	openFile() {
		uni.downloadFile({
			url: this.hostUrl + '/static/index/prove.docx',  //文件的路径
			success: function(res) {
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功');
					}
				});
			}
		});
	},
</script>

到了这里,关于uniapp 开发小程序——点击预览文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp —— 微信小程序预览文件

    1.问题:但是内置方法一般使用的是url预览,如果接口返回的是文件流,前端如何处理 uni.downloadFile uni.openDocument 2.解决:后端接口路径拼接,如果使用的是PC端下载文件的接口,但接口返回的是文件流,可以将地址进行拼接,放到uni.downloadFile中的url中 3.tip:网上的其他办法,

    2024年02月12日
    浏览(65)
  • 【uniapp】uniapp开发app项目实现在线预览pdf文件

    最终效果: 1.需要先从网上下载一份 pdf.js 的文件 地址:http://mozilla.github.io/pdf.js/getting_started/ 2.可以在uniapp项目中和 pages 目录平级新建一个 hybrid 文件夹,把下载好的 pdf.js 文件全部放到里面,主要是利用了web文件夹下的 viewer.html 文件 3.要实现pdf预览,需要用到 uniapp 的一个

    2023年04月08日
    浏览(62)
  • uniapp 小程序打开预览pdf文件

    微信公众平台 =》 开发管理 =》 开发设置 =》业务域名 注意:配置为业务域名后,可调用web-view组件在小程序中打开 注意:需要区分是安卓还是ios,ios可以直接使用webview打开pdf文件,安卓需要先下载再预览

    2024年02月11日
    浏览(40)
  • uniapp微信小程序 图片&文件上传并且支持图片和文件预览(pdf等文件预览)巨细教学!

    首先呢,小程序打开pdf等文件有下面几种办法: 用微信自带的wx.downloadFile() + wx.openDocument() 使用web-view,uni-app中webview可以直接加载pdf文件 可以使用网上说的pdf.js去实现(我没有用到这个,就不介绍了) 网上查到很多资料显示安卓是可以通过上面第一种办法,但是ios用第一个

    2024年02月04日
    浏览(64)
  • uniapp点击图片放大预览

    阐述 有些时候我们在用uniapp显示图片时,有的不宜全部显示到屏幕上,uniapp提供了一个非常好用的api。

    2024年02月14日
    浏览(48)
  • uniapp开发,app手机状态栏问题挡住问题、小程序关闭过滤无依赖文件

    问题:在使用uniapp开发手机App时,因为HBuildX创建的应用默认是沉浸式样式,如果去除自带的导航栏之后,页面会直通手机顶部状态栏,解决办法如下: 方法1:使用uniapp官方文档提供的解决方案 https://uniapp.dcloud.io/collocation/pages?id=customnav 方法二:配置mainfest.json来关闭沉浸式。

    2024年02月11日
    浏览(38)
  • 简单描述下微信小程序的相关文件类型以及微信小程序和uniapp的区别?

    目录 前言 相关文件类型 1. JSON 配置文件 作用: 用于小程序全局配置,如页面路径、窗口表现、网络超时等。 代码示例: app.json 2. WXML 文件 作用: 小程序的视图层,类似于HTML,用于构建页面结构。 代码示例: index.wxml 3. WXSS 文件 作用: 用于设置小程序页面的样式,

    2024年02月04日
    浏览(42)
  • uniapp 在线预览各种格式文件(支持doc, xls, ppt, pdf, docx, xlsx, pptx格式) 适用于小程序 (解决了真机调试可以打开,发布体验版打不开的问题)(可设置文件名)

    代码: 参考官方文档: uni.saveFile(OBJECT) @savefile | uni-app官网 uni-app,uniCloud,serverless https://uniapp.dcloud.net.cn/api/file/file.html#opendocument tips: 问题一: 打不开         1. 文件地址须保证能正常打开(在浏览器中尝试是否能预览或正常下载)         2.注意文件名最好为数字字母(非中文) 问题

    2024年02月05日
    浏览(61)
  • uniapp阿里云云开发微信小程序体验版和预览无法调用问题

    作者简介:一名前端小菜鸟 座右铭:再懒也要吃饭啊 作者主页: 狗叫迪迪的首页 前言 本人也是第一次使用HBuilder+阿里云进行开发,这个问题还是第一次运行并上传体验版是发现的,当时弄了好久,百度各种查都没能解决,网上的问题要么是域名白名单没有配置或者是点击

    2024年02月14日
    浏览(38)
  • 【uniapp开发小程序】点击获取手机号(使用@getphonenumber)

    一、实现效果 二、代码实现:

    2024年02月11日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包