微信小程序 PDF 预览实践（uni.downloadFile → uni.openDocument）

微信小程序 PDF 预览实践

小程序无法直接打开远程 PDF，需先下载至本地临时文件，再调用系统文档能力打开。核心 API：uni.downloadFile → uni.openDocument。

接口数据约定

GET /wx/recycle/resourceOrder/contractTemplate 返回示例：

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "templateName": "资源交易合同模板",
    "fileName": "交易合同.pdf",
    "fileUrl": "https://zszy.weerspace.com:9220/recyclebucket/xxx.pdf",
    "fileType": "pdf",
    "suffix": "pdf"
  }
}

fileUrl 须为可访问的完整 HTTPS 地址。

调用时机（什么时候执行）

页面结构示例：

<!-- 有 fileUrl 时展示文件行；点击整行触发预览 -->
<view
  v-if="contractTemplate.fileUrl"
  class="file-item"
  @tap="previewTemplateFile(contractTemplate)"
>
  <text>{{ contractTemplate.fileName || '合同模板' }}</text>
  <text>预览</text>
</view>

数据准备：

const contractTemplate = reactive({
  templateName: '',
  fileName: '',
  fileUrl: '',
  fileType: '',
  suffix: '',
})

const applyTemplate = (target, data = {}) => {
  Object.assign(target, {
    templateName: data.templateName || '',
    fileName: data.fileName || '',
    fileUrl: data.fileUrl || '',
    fileType: data.fileType || '',
    suffix: data.suffix || '',
  })
}

// onLoad 时调用
const fetchContractTemplate = async () => {
  const res = await resourceOrderApi.contractTemplate()
  if (res?.code === 200 || res?.code === 0) {
    applyTemplate(contractTemplate, res.data || {})
  }
}

流程：

onLoad → 接口灌入 contractTemplate
用户点击「预览」→ previewTemplateFile(contractTemplate)
→ downloadFile → openDocument

核心实现

const fileBusy = ref(false) // 防连点：下载中再次点击直接 return

/**
 * 预览远程文档（PDF 等）
 * @param {{ fileUrl: string }} template 一般为页面上的 contractTemplate
 */
const previewTemplateFile = (template) => {
  if (fileBusy.value) return

  const filePath = template?.fileUrl
  if (!filePath) {
    uni.showToast({ title: '暂无可预览文件', icon: 'none' })
    return
  }

  fileBusy.value = true
  uni.showLoading({ title: '打开中', mask: true })

  uni.downloadFile({
    url: filePath,
    success: (res) => {
      uni.hideLoading()
      fileBusy.value = false

      if (res.statusCode !== 200 || !res.tempFilePath) {
        uni.showToast({ title: '预览失败', icon: 'none' })
        return
      }

      uni.openDocument({
        filePath: res.tempFilePath,
        showMenu: true,
        fail: () => {
          uni.showToast({ title: '打开文件失败', icon: 'none' })
        },
      })
    },
    complete: () => {
      uni.hideLoading()
      fileBusy.value = false
    },
    fail: () => {
      uni.hideLoading()
      fileBusy.value = false
      uni.showToast({ title: '预览失败', icon: 'none' })
    },
  })
}

上线注意

预览码 / 体验版 / 正式版会校验 downloadFile 合法域名，端口须与 fileUrl 一致。真机调试通常不校验，不能作为最终验收依据。