H5和微信小程序实现文件预览功能

拷贝程序猿

已于 2023-06-02 11:18:47 修改

阅读量5.6k

点赞数 3

文章标签：微信小程序前端

于 2023-05-25 19:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_43837305/article/details/130865661

版权

文章介绍了如何在H5和微信小程序中实现文件预览功能，包括使用第三方链接预览、处理iOS设备的window.open问题，以及微信小程序中的downloadFile和openDocument方法。在微信小程序中，特别提到了解决本地开发者工具和线上环境的差异问题，以及文件名称自定义的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、H5实现文件预览功能
- 1.用第三方链接直接预览
- 2.遇到ios设备window.open问题
二、微信小程序实现文件预览功能
总结

前言

提示：本文仅供参考：

最近新增了一个需求，要求在H5和微信小程序生成方案并查看ppt和excel功能。本项目是taro框架打包生成的H5和小程序，代码仅供参考。

一、H5实现文件预览功能

1.用第三方链接直接预览

代码如下（示例）：

let url = "https://view.officeapps.live.com/op/view.aspx?src=" + 文档url;
//两种方式
window.open（url）;  //新建窗口打开链接预览
window.location.href = url;  //本页面内跳转链接实现预览

2.遇到ios设备window.open问题

代码修改如下（示例）：

 let user = navigator.userAgent;
 //android端
 let isAndroid = user.indexOf('Android') > -1 || user.indexOf('Adr') > -1;
 let isiOS = !!user.match(/\(i[^;]+;( U;)? CPU.