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

迈不过友情╰ 2021-09-07 17:52 347阅读 0赞

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

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

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

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

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

官网给出的资料是比较少的，对接过程遇到的问题，通过博客记录下来，分享出来，仅供参考：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]  
对接遇到问题：

*  url这个链接，要看项目，有些项目都是有专门的文件服务器，然后将url放上去就行，而对于我对接的系统，是将文件保存到服务器对应的磁盘路径，这种问题也困扰了我一会，然后想到将文件流output.write出来

/** * <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
         }
     }

文件工具类代码：

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的一致，填错了是不能预览和下载的，所以需要注意  
    ![在这里插入图片描述][20210513184245773.png]

[https_work.weixin.qq.com_api_doc_90000_90136_90497]: https://work.weixin.qq.com/api/doc/90000/90136/90497
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210813/f5a33614c7fa44849db61c0566b93603.png
[20210513184245773.png]: /images/20210813/0102a066b3c0422e90a132f283f9873e.png