昌江县住房和城乡建设网站,音乐网站答辩,华能电子商务平台,网站建设广州目录
第一章 实现效果
第二章 了解并解决需求
2.1 了解需求
2.2 解决需求
2.2.1 方法一
2.2.2 方法二
第三章 资源下载 第一章 实现效果 第二章 了解并解决需求
2.1 了解需求
前端需要利用后端传的pdf临时路径实现H5端以及app端的pdf预览首先我们别像pc端一样#…目录
第一章 实现效果
第二章 了解并解决需求
2.1 了解需求
2.2 解决需求
2.2.1 方法一
2.2.2 方法二
第三章 资源下载 第一章 实现效果 第二章 了解并解决需求
2.1 了解需求
前端需要利用后端传的pdf临时路径实现H5端以及app端的pdf预览首先我们别像pc端一样利用iframe或者 window.open解决方法如下
2.2 解决需求
2.2.1 方法一
static下添加该pdf文件一定要注意的是将该文件夹放在static下文件获取在最后给出 创建pdf预览文件夹 根据需求撰写前端代码
templateview classwrapperuni-nav-barleft-iconback :fixedtrueclickLeftback2Index titlepdf预览backgroundColor#1677FFheight88rpxcolor#fff:borderfalsesafeAreaInsetTop/uni-nav-barweb-view :srcpdfUrl width100% height100rpx classmain/web-view/view
/templatescriptexport default {data() {return {pdfUrl:,// 方法一的预览路径注意写法文件命名可以自定义具体看自己但是参数格式不要错了viewerUrl: /static/html/web/viewer.html?file};},onLoad(options) {// pdf预览路径拼接options是请求后端路径的页面值传参的this.pdfUrl this.viewerUrl options.pdfUrlconsole.log(url, this.pdfUrl)},methods:{back2Index(){uni.navigateBack()},}}
/scriptstyle langscss scoped
.wrapper{background-color: #f3f4f6;.main{margin-top: 88rpx;}
}
/style请求路径的文件代码内容
// 获取pdf文件信息
downloadInfo (file) {// 接口请求大家自行调整自己的请求方式deathInfoService.download({fileName: file}).then(({data}) {let blob dataconst binaryData []binaryData.push(blob)// 看下面该url是小编最终转的pdf临时路径const url window.URL.createObjectURL(new Blob(binaryData, { type: application/pdf;chartsetUTF-8 }))// 拿到url之后传参跳转页面uni.navigateTo({url:/page_cremationAppoint/cremationAppoint/pdfView?pdfUrl url})})
},
注意 以上所有代码只是小编的大致思路具体实现需要大家根据实际情况自行判断例如pdf路径是已经有的就不需要发送请求直接带参跳转即可也可能有的后端会直接返回一个路径…只是小编的这个后端比较懒说能实现就行所以小编这里为了得到路径对后端返回的值做了处理。
第一种方法已经实现了具体效果在最开始展示了
2.2.2 方法二
方法2的处理方式与方法一的处理思路是一样的吗唯一不同的就是使用的工具不同这里使用的是pdf.js文件。需要更改的地方是 该url是根据大家工具放的位置写的但也是在static文件下参数是url代码如下
viewerUrl: /static/pdf/pdf.html?url
第三章 资源下载 小编gitee仓库中resource_package: uniapp pdf预览需要的资源包
