admin管理员组文章数量:1600683
目录
一、前端请求方式
二、请求方法
三、后端响应方式
一、前端请求方式
解析文件流形式返回的数据,判断是否可供下载
//下载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;
}
版权声明:本文标题:uni-app实现PDF文件下载功能 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728349929a1155230.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论