H5和微信小程序实现文件预览功能-Toy模板网

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

前言

提示：本文仅供参考：

最近新增了一个需求，要求在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.+Mac OS X/); //ios终端
 let iPhone = user.indexOf('iPhone') > -1; //是否为iPhone或者QQHD浏览器
 let iPad = user.indexOf('iPad') > -1; //是否iPad

 if (isiOS || iPad || iPhone) {
   // location.replace(url); //本页面内跳转链接实现预览，不留页面历史记录
   window.location.href = url;//本页面内跳转链接实现预览，留页面历史记录
 } else {
   window.open(url); //新建窗口打开链接预览
 }

二、微信小程序实现文件预览功能

1.使用官方downloadFile和openDocument实现

代码如下（示例）：

Taro.downloadFile({
  url: 文档url,
  success: function(res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      var filePath = res.tempFilePath;
      Taro.openDocument({
        filePath: filePath,
        fileType: 'pptx',
        success: function(res) {
          console.log('打开文档成功');
        },
      });
    }
  },
});

2.遇到本地开发者工具可以打开，上线没反应问题

1：先把本地的微信开发者工具，不校验HTTPS关掉再次run看一下是否有报错
h5 文件预览,微信小程序,前端
2：有报错的话看文档url的域名是否在downloadFile合法域名中，没有的话要先配置（小程序开发设置）

3：在官方openDocument方法中，如果是excel必须要写fileType: ‘xlsx’，不然打不开，ppt不写我这边是正常，为了严谨还是都写一下

Taro.openDocument({
  filePath: filePath,
  fileType: 'xlsx', //pptx
  success: function(res) {
    console.log('打开文档成功');
  },
});

如果体验版代码没生效的话，先打开调试，然后在进入体验版，看看是否有报错，一般到这里就没问题了。

3.小程序文件名称自定义

使用微信临时环境：wx.env.USER_DATA_PATH

const downloadTask = Taro.downloadFile({
  url: url,
  filePath: wx.env.USER_DATA_PATH + `/${命名}.pptx`,
  success: function(res) {
    // console.log(res);
    if (res.statusCode === 200) {
      var filePath = res.tempFilePath;
      Taro.openDocument({
        filePath: wx.env.USER_DATA_PATH + `/${命名}.pptx`,
        showMenu: true,//展示右上角分享操作
        fileType: 'pptx',
        success: function(res) {
          // console.log('打开文档成功');
        },
      });
    }
  },
});
downloadTask.progress((res) => {
  console.log('下载进度', res.progress);
});