前言

去年就想写一篇关于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。

代码如下（根据业务自行更改）：

<template><view><web-view :src="url"></web-view></view>
</template><script>export default {data() {return {url: '',//PDF路径viewerUrl:'/static/pdf/web/viewer.html',//用来渲染PDF的htmlfileUrl:'/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{//无参就不预览PDFuni.showModal({//弹出提示title:'系统提示',//提示的标题content: '参数无效',//提示的内容confirmText:'返回',//取消按钮的文字，默认为"取消"showCancel:false,//是否显示取消按钮，默认为 truesuccess: (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();}}}

uni-app实现PDF预览功能（避坑看这）相关推荐

实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
微信小程序实现PDF预览功能——pdf.js(含源码解析）
文章目录前言一.pdf.js 是什么? 二.使用步骤 1.下载库文件 2.使用方式微信小程序端--使用 web-view 标签 H5 端--使用 iframe 标签(使用vue框架) 3.更改源 ...
控制chrome中PDF预览工具栏
在实际开发中,遇到使用chrome自带的PDF预览功能,前端把后台返回的地址,通过XMLHttpRequest转换成blob,并在blob地址后拼接上文件名称,通过创建embed展示PDF: 这种方法 ...
电子档案目录PDF预览
# 需求档案电子化著录模块需要PDF预览功能方便打印标准A4纸质文档模版如下图: 代码流程: 控制层: /*** 预览档案目录*/@GetMapping("preview-c ...
APP在线演示预览网站appetize.io详细使用介绍
appetize.io 是一个为iOS和Android提供APP在线演示的网站,只要将你的Demo程序运行后的.app文件打包UPLOAD到appetize.io,上传完成后,会给对应的邮箱发一个链接 ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
java零碎要点010---Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...

uni-app实现PDF预览功能（避坑看这）

前言

一、下载PDF预览相关文件

二、使用步骤

uni-app实现PDF预览功能（避坑看这）相关推荐

最新文章

热门文章