微信小程序文件实现下载并预览（ios及安卓手机）

woowen！

已于 2022-04-15 09:33:04 修改

阅读量1.2w

点赞数 10

分类专栏：微信文章标签：微信小程序文件下载

于 2021-07-26 10:53:24 首次发布

本文链接：https://blog.csdn.net/q1ngqingsky/article/details/118966990

版权

本文详细介绍了微信小程序中如何配置downloadFile域名，实现文件下载，并针对iOS设备无法预览的问题提供了解决方案。通过检查URL类型，分别调用wx.openDocument和wx.previewImage进行文件或图片预览。

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

1. 配置downloadFile域名

2. 下载文件-代码实现以及注意事项

3. 微信小程序下载文件ios无法预览-完整方案

微信小程序上传文件可查看这篇文章：微信小程序上传文件response的内容返回格式需要转变为json对象

1. 配置downloadFile域名

登录小程序平台，找到【开发管理】-【开发设置】，在服务器域名模块设置downloadFile域名

2. 下载文件-代码实现以及注意事项

注意事项：

后端返回的下载url地址必须是可预览的，不然无法在手机上查看预览
wx.openDocument,注意fileType属性的值
wx.saveFile方法本地文件存储的大小限制为 10M，所以在下载之前先将本地缓存的文件一一删除

downFile.wxml:

<view class="cell-list-wrap">
  <view class="cell-list-file" wx:for="{
  {lists}}" wx:key="index">
    <text class="title">{
  {item.name}}</text>
    <text class="down topZindex" bindtap="onDown" data-fileurl="{
  {item.fileUrl}}">下载</text>
  </view> 
</view>

downFile.js:

// 下载

Component({
  properties: {
    lists: {
      type: Array,
      value: []
    }
  },
  data: {},
  ready: function() { },
  methods: {
    
    // 下载文件
    /**
     * 本地文件存储的大小限制为