微信小程序预览文件

许你满眼星辰

已于 2022-06-28 14:19:24 修改

阅读量710

点赞数

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

于 2021-08-11 14:46:58 首次发布

本文链接：https://blog.csdn.net/m0_58849641/article/details/119606563

版权

本文介绍了如何在微信小程序中实现文件预览功能，通过为文件添加点击事件，引入自定义的公共方法，并在事件处理中调用预览方法，传入文件路径和类型。

摘要由CSDN通过智能技术生成

1.给需要看的文件一个点击事件

<view wx:for="{
  {fileList}}"  bindtap="viewFile">{
  {item.fileName}}</view>

2.引入自己写的公共方法

import {downloadFile} from '../../../utils/viewFile'

3.以下就是自己写的方法

export function downloadFile (url,type) {
  wx.showLoading({
    title: '加载中...',
    });
  wx.downloadFile({//下载对应文件
    url: url,
    success: function (res) {  
      console.log(res)  
      let filePath = res.tempFilePath;//文件路径    
      wx.openDocument({
        filePath: filePath,   // 装载对应文件的路径
        fileType: type,   // 指定打开的文件类型
        showMenu: true,       // 右上角的菜单转发分享操作
        success: function (res) {
          wx.hideLoading();
          console.log("打开成功");
        },
        fail: function (res) {
          console.log(res);
          wx.hideLoading();
          wx.showToast({
            title: '打开失败',
            icon: &#