uni-app实现PDF文件下载功能

目录

一、前端请求方式

二、请求方法

三、后端响应方式

---

一、前端请求方式

解析文件流形式返回的数据，判断是否可供下载

//下载PDF
downloadAgreement() {
    //加载loading样式
    uni.showLoading({
        title: "正在请求数据"
    });
    //pdf文件名
    let pdfName = this.dataName + '.pdf';
    //请求方法
    pdfDownload(this.dataId).then(res => {
    //取消loading样式加载
    uni.hideLoading();
    //转换blob数据类型
    let blob = new Blob([res.data]);
    //创建读取文件FileReader
    let reader = new FileReader();
    reader.readAsText(blob, "utf-8");
    reader.onload = () => {
	    try{//这里返回的数据是JSON格式
		    //此处对fileReader读出的结果进行JSON解析
		    //会出现错误，需要进行捕获
		    let res = JSON.parse(reader.result);
		    console.log(res);
		    //弹出提示
		    uni.showModal({
		    title:'系统提示',
			content:'文件不存在',//响应消息提示
			showCancel:false//不显示取消按钮
		    });
	    }catch(err){//捕获异常 无法解析JSON格式 这里返回的数据是文件流 可供下载
            console.log("文件可下载",res.data);
		    //以'a'标签的形式自点击下载
		    let downloadElement = document.createElement("a");
		    let href = window.URL.createObjectURL(blob); //创建下载的链接
		    downloadElement.href = href;
		    downloadElement.download = pdfName; //下载后文件名
		    document.body.appendChild(downloadElement);
		    downloadElement.click(); //点击下载
		    document.body.removeChild(downloadElement); //下载完成移除元素
		    window.URL.revokeObjectURL(href); //释放掉blob对象
	        }
        }
    });
},

二、请求方法

一定要设置响应类型，否则会是空白pdf

// PDF下载
export function pdfDownload(id) {
  return request({
    url: '/xxx/xx/xxx/xxxxx/' + id,
	responseType: 'arraybuffer',//返回数据类型
    method: 'get'
  })
}

三、后端响应方式

这是静态方法 ，业务逻辑自行调用，文件流输出

    /**
     * pdf下载
     * @author luvJie-7c
     * @date 2022-8-5 17:31
     * @param fileName 文件名
     * @param path 文件路径
     * @return void
     */
    public static String previewPdf(String fileName, String path){
        //获取HttpServletResponse （静态自创建）
        HttpServletResponse response =((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
            // 验证该文件是否是存在
            if(new File(path).exists()){
                //添加跨域访问
                response.setHeader("Access-Control-Allow-Origin", "*");
                //以流的形式传输
                response.setContentType("application/octet-stream");
                // 设置文件流编码格式
                response.setCharacterEncoding("UTF-8");
                //Content-Disposition属性名 （attachment表示以附件的方式下载;inline表示在页面内打开）
                response.setHeader("Content-Disposition", "attachment; fileName="+fileName+".pdf");
                try { //输入输出
                    FileInputStream is = new FileInputStream(path);
                    ServletOutputStream out = response.getOutputStream();
                    byte[] buffer = new byte[1024];
                    int i = 0;
                    while ((i = is.read(buffer)) != -1) {
                        out.write(buffer,0,i);
                    }
                    //缓存区的数据进行输出
                    out.flush();
                    //关闭流
                    out.close();
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        return exist;
    }