当前位置：首页 > news >正文

H5接入企微JS-SDK，使用wx.previewFile进行文件预览

news 2025/11/26 23:33:30

最近上项目，需求是做一个附件预览并且可以进行保存到手机、用其他应用打开的需求，用企微的JS-SDK的wx.previewFile就可以满足我目前的需求
详细的可以参考：企业微信官方文档

前端

1、在项目的index.html中添加：jweixin-1.2.0.js 文件
在这里插入图片描述
2、在想要使用JS-SDK的组件进行config接口注入权限验证配置，因为我这里只是目前这个组件使用，我都写到同一个vue文件中了，也可以设置成一个公共方法

  mounted() {// 在页面加载的时候进行调取一下this.handleWxConfig();},methods: {handleWxConfig() {let url = window.location.href;// 为了避免url带参数的时候后端接收和前端不一致，所以我这里做了一下编码，然后让后端解码一下getSdkSign(encodeURIComponent(url)).then((res) => {let { code, data, msg } = res;if (code === 800) {/*** 这里的wx和jWeixin是一致的，但是控制台打印出来jWeixin的方法比较全，我就用这个了* 因为appId/timestamp/nonceStr/signature都需要和后端保持一致，所以都让后端传回来给前端*/window.jWeixin.config({beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appId, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ["previewFile"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来});window.jWeixin.ready(() => {// 可以用checkJsApi来判断api是否可以用了window.jWeixin.checkJsApi({jsApiList: ["previewFile"],success: function (res) {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"previewFile":true},"errMsg":"checkJsApi:ok"}},});});window.jWeixin.error(res => {console.log('------链接失败', res);})}});},handlePreviewUrl(fileInfo) {/*** 发现用wx.previewFile是不行的，使用以下方法就Ok了，并且你会发现在打开jweixin-1.2.0.js* 是没有previewFile这个方法的，但是并不影响使用*/window.jWeixin.invoke('previewFile', {url: fileInfo.filePath,  // 是必填的name: fileInfo.fileName, // 是必填的size: fileInfo.fileSize, // 是必填的})}
}