企业微信内嵌H5，引入 JS-SDK 调用 wx.previewFile 预览/下载文件（vue2.0适用）

最新推荐文章于 2024-12-20 16:17:59 发布

TrumanGao

最新推荐文章于 2024-12-20 16:17:59 发布

阅读量1.5w

点赞数 6

本文链接：https://blog.csdn.net/TrumanGao/article/details/109741978

版权

本文介绍了如何在基于vue2.0的H5页面中，嵌入企业微信JS-SDK，通过wx.previewFile实现文件预览和下载功能。关键步骤包括引入JS-SDK、配置wx.config以及调用wx.previewFile。特别提醒，文件名需包含后缀，且预览接口需采用特定调用方式。

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

文章目录

业务场景
使用步骤
附：官方文档

业务场景

基于vue2.0开发企业微信内嵌H5，实现文件下载功能。我司的文件存储路径是阿里云oss，使用其他开放资源也一样。

使用步骤

1. 引入企业微信 JS-SDK

注意：

引入源码必须是 "//res.wx.qq.com/open/js/jweixin-1.2.0.js"，否则 wx.previewFile 会有未知的问题；
vue2.0项目，你可能在有的文章里见过 npm install weixin-js-sdk 方式引入。非官方，不推荐；
你可能会发现，//res.wx.qq.com/open/js/jweixin-1.2.0.js 里找不到previewFile函数，window.wx上也没有。不用在意，previewFile是原生实现的，看不到并不影响调用。

/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
    <div id="app"></div>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>