前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >企业微信系列之JSSDK文件预览对接

企业微信系列之JSSDK文件预览对接

作者头像
SmileNicky
发布2021-05-14 10:16:18
3.1K1
发布2021-05-14 10:16:18
举报
文章被收录于专栏:Nicky's blogNicky's blog

企业微信系列之JSSDK文件预览对接

企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。 通过使用企业微信JS-SDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。

通过使用企业微信JS-SDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。

最近在对接企业微信的文件预览,在企业微信官方文档找到参考链接,https://work.weixin.qq.com/api/doc/90000/90136/90497

代码语言:javascript
复制
wx.previewFile({
    url: '', // 需要预览文件的地址(必填,可以使用相对路径)
    name: '', // 需要预览文件的文件名,必须有带文件格式的后缀,例如.doc(不填的话取url的最后部分,最后部分是个包含格式后缀的文件名)
    size: 1048576 // 需要预览文件的字节大小(必填,而且大小必须正确,否则会打开失败)
});

官网给出的资料是比较少的,对接过程遇到的问题,通过博客记录下来,分享出来,仅供参考:

在这里插入图片描述
在这里插入图片描述

对接遇到问题:

  • url这个链接,要看项目,有些项目都是有专门的文件服务器,然后将url放上去就行,而对于我对接的系统,是将文件保存到服务器对应的磁盘路径,这种问题也困扰了我一会,然后想到将文件流output.write出来
代码语言:javascript
复制
/**
  * <h2>wx.previewFile微信材料预览,提供url给前端调用</h2>
  * @Author nicky
  * @Date 2021/05/07 15:32
  * @Param [filePath, response]
  * @return void
  */
 @ApiOperation(value = "1.jssdk材料http预览接口",position = 1)
 @GetMapping(value = {"/wxPreviewFile"})
 @ApiImplicitParams({@ApiImplicitParam(name = "filePath", value = "附件相对路径,url编码一遍", required = true) })
 public void wxPreviewFile(@RequestParam(value = "filePath", required = true)String filePath, HttpServletResponse response) throws Exception{
     try {
         if (StringUtils.isNotBlank(filePath)) {
             filePath =URLEncoder.encode(filePath , "UTF-8");
         }
         if (log.isInfoEnabled()) {
             log.info("filePath:{}", ConfigConstant.FILEBASEPATH +filePath);
         }
         byte[] bytes = CommonFileUtil.loadFromFile( ConfigConstant.FILEBASEPATH + filePath);
         OutputStream output = response.getOutputStream();
         response.setContentType(CommonFileUtil.loadContentType(CommonFileUtil.loadSuffix(filePath)));
         output.write(bytes);
         output.flush();
         output.close();
     } catch (Exception e) {
         // ignore exception
     }
 }

文件工具类代码:

代码语言:javascript
复制
static{
	FILE_TYPES.put("xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");//xlsx
	FILE_TYPES.put("xls", "application/vnd.ms-excel");//xls
	FILE_TYPES.put("docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");//docx
	FILE_TYPES.put("doc", "application/msword");//doc
	FILE_TYPES.put("jpg", "image/jpeg");//jpg
	FILE_TYPES.put("png", "image/png");//png
	FILE_TYPES.put("gif", "image/gif");//gif
	FILE_TYPES.put("txt", "text/plain");//txt
	FILE_TYPES.put("pdf", "application/pdf");//txt
}

public static String loadContentType(String fileType){
	String temp =  FILE_TYPES.get(fileType);
	if(StringUtils.isEmpty(temp)){
		return fileType;
	}else{
		return temp;
	}
}

public static String loadSuffix(String name) {
if(StringUtils.isEmpty(name) || name.length()==0)
		return "";
	return name.substring(name.lastIndexOf(".")+1);
}

public static   byte[] loadFromFile(String localStorePath) throws IOException {
   BufferedInputStream in = new BufferedInputStream(new FileInputStream(localStorePath));
    ByteArrayOutputStream out = new ByteArrayOutputStream(1024);
    byte[] temp = new byte[1024];
    int size = 0;
    while ((size = in.read(temp)) != -1) {
        out.write(temp, 0, size);
    }
    in.close();
    byte[] content = out.toByteArray();
    return content;
}
  • name参数的文件名最好和url的一致,填错了是不能预览和下载的,所以需要注意
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-05-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档