uniapp 根据第三方提供的获取附件接口打开文件

编程（变成）小辣鸡

已于 2023-03-24 10:10:46 修改

阅读量666

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app java

于 2023-03-11 11:40:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52803316/article/details/129460589

该文章展示了在uni-app中如何实现附件的预览和下载功能。点击附件时，通过js方法判断文件类型，如果是图片则使用uni.previewImage进行预览，其他类型的文件如DOC、PDF等则调用后台接口下载。后台接口通过RestTemplate与第三方服务交互，获取文件后将其内容写入响应流以供下载。

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

1 uni-app 的js方法

methods:{
    //预览附件
    clickAttachment(id){
        let newUrl = this.$getBaseUrl() +"/downloadThirdByCapital/"+id;//传到后台读取,id是附件id
        let suffix = url.substring(url.lastIndexOf('.')+1,url.length)
        if(suffix.toUpperCase()=="JPG"||suffix.toUpperCase()=="PNG"){
            let images=[];
            images.push(newUrl);
            uni.previewImage({
                urls: images,
                indicator: 'number',
                loop: true
            });
        }else if(suffix.toUpperCase()=="DOC"||suffix.toUpperCase()=="DOCX"||suffix.toUpperCase()=="XLS"||suffix.toUpperCase()=="XLSX"||suffix.toUpperCase()=="PPT"||suffix.toUpperCase()=="PPTX"||suffix.toUpperCase()=="PDF"){
            uni.downloadFile({
                url: newUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        //打开文件
                        uni.openDocument({
                            filePath: res.tempFilePath,
                            fileType: suffix,
                            success: function(res) {}
                        });
                    }
                },
            });
        }
    }
}

2 调用后台接口读取输出

@PassToken
@GetMapping(value = "downloadThirdByCapital/{id}",name = "调用第三方文件接口）")
public void downloadThird(@PathVariable("id")String id, HttpServletResponse response) throws IOException {
    //第三方获取附件接口路径
    String url="https://xxxxx?id="+id;
    RestTemplate restTemplate = new RestTemplate();
    HttpHeaders headers = new HttpHeaders();
    // 调用下载接口进行下载
    // id 为String类型，为被调用接口参数
    ResponseEntity<byte[]> entity = restTemplate.exchange(url, HttpMethod.GET,new HttpEntity<>(headers), byte[].class);
    // 返回数据，在下面写到输出流里面（由于需要把字节数组传递给另外一个系统，所以我注释了下面的代码，不需要存本地）
    byte[] body = entity.getBody();
    // 这三行是对文件名编码，与内容编码，可以不写
    response.setContentType("application/x-msdownload");
    response.addHeader("Content-Disposition", "attachment; ");
    // 把boby数据写入输出流输出
    response.getOutputStream().write(body);
}