uniapp 使用pdf.js 实现app的预览

在实现uniapp实现预览时,参考文档https://blog.csdn.net/qq_45978154/article/details/130049583
在uniapp时 测试 pdf.js https://github.com/mozilla/pdf.js/releases?page=3 v3版本的可以正常预览和使用。其他版本请自行测试。
在此处如果需要安卓和ios端使用需要完善下面的代码:

console.log('=>进入了PDF预览页面')
			console.log('获取的参数=>',option)
			if(option.id !=undefined && option.id !='undefined' && option.id !='' && option.id !=null){
               //这里根据平台调整pdf的路径。
				this.url =this.viewerUrl+'?file='+parsePdf(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预览成功=>')
			}

————————————————
如果pdf文件读取手机本地文件时,需要加入pdfurl的文件路径的判断,网络路径的pdf不需要处理。

parsePdf(url) {
  url = encodeURIComponent(url)
	// #ifdef APP-PLUS
	url= plus.io.convertLocalFileSystemURL(url);
	// #endif
  return url
}

后续待补充:TODO

posted @ 2025-08-28 12:19  Vktun  阅读(139)  评论(0)    收藏  举报