目录
前言
去年就想写一篇关于uni-app的pdf预览功能，拖很久了，补上。
一、下载PDF预览相关文件
- 下载地址
- 解压后效果：
二、使用步骤
- 在 static 文件夹下新建 pdf 文件夹，将解压文件放进 pdf 文件夹下（看网上很多博主把文件夹放在根目录里，我反正之前试到最后始终无法打开预览请求的PDF文件！ 避坑 ：放在 static 文件夹下就没问题了）
- 如图所示：
- 这里以 demo 演示 pdf 预览效果
- 新建了一个 index 页面，加了一个 预览PDF 按钮
- 代码如下：
<template>
<view class="content">
<view class="text-area">
<button @click="previewPdf()">预览PDF</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
previewPdf(){
console.log('=>点击了预览pdf按钮')
uni.navigateTo({//保留当前页面，跳转到应用内的某个页面
url: '/pages/pdfDemo/pdfView?id='+123456//带参跳转
// url: '/pages/pdfDemo/pdfView'//无参跳转
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
- 新建了一个 pdfView PDF预览页面
- web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面，这里用它来展示PDF。
- 安卓模拟器、ios手机浏览器访问截图
-
-
代码如下（ 根据业务自行更改 ）：
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: '',//PDF路径
viewerUrl:'/static/pdf/web/viewer.html',//用来渲染PDF的html
fileUrl:'/static/pdf/web/compressed.tracemonkey-pldi-09.pdf'//pdfjs自带的默认PDF
};
},
onLoad(option) {
console.log('=>进入了PDF预览页面')
console.log('获取的参数=>',option)
if(option.id !=undefined && option.id !='undefined' && option.id !='' && option.id !=null){
this.url =this.viewerUrl+'?file='+encodeURIComponent(this.fileUrl); // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
//以发起请求的方式获取预览PDF
// uni.request({
// url: '/xxx/xxx/xxx/previewPdf/'+option.id,
// method: 'GET',
// header: { 'Authorization': 'Bearer ' + uni.getStorageSync('Admin-Token') },//自定义请求头
// responseType: 'arraybuffer',
// success: (res) => {
// let blob = new Blob([res.data],{type:'application/pdf;chartset=UTF-8'});//转换blob数据类型
// let href = URL.createObjectURL(blob);
// this.url =this.viewerUrl+'?file='+encodeURIComponent(href);// encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
// },
// });
console.log('PDF预览成功=>')
}else{//无参就不预览PDF
uni.showModal({//弹出提示
title:'系统提示',//提示的标题
content: '参数无效',//提示的内容
confirmText:'返回',//取消按钮的文字，默认为"取消"
showCancel:false,//是否显示取消按钮，默认为 true
success: (res) => {
if (res.confirm) {//监听弹窗返回按钮
uni.navigateBack();//返回上一页
}
}
});
}
},
methods: {
}
}
</script>
<style>
</style>
@GetMapping("/previewPdf/{id}")
public void previewPdf(@PathVariable("id") String id) {}- 返回文件流（Java）
/**
* 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();
}
}
}