uniapp h5在线预览base64格式pdf

最新推荐文章于 2024-07-10 09:31:25 发布

w_988

最新推荐文章于 2024-07-10 09:31:25 发布

阅读量1.3k

点赞数 2

文章标签： uni-app pdf html5

本文链接：https://blog.csdn.net/w_977/article/details/132101079

版权

uniapp h5在线预览base64格式pdf

下载pdf.js插件 https://mozilla.github.io/pdf.js/getting_started/#download

我下载的是第二个
在这里插入图片描述将下载的插件文件放在static目录下

页面中实现代码

<template>
	<view>
		<web-view :src="src"></web-view>
	</view>
</template>

export default{
	data() {
		return{
			viewerUrl:'/static/hybrid/web/viewer.html',
			src:'', // 最终的pdf路径
		}
	},
	onLoad(){
		this.getPdfBase64()
	},
	methods:{
		getPdfBase64() {
			let url= ... // 获取接口返回的base64
			// base64转换成blob
			this.base64ToBlob(url)
		},
		base64ToBlob(url) {
			let str = atob(url)
			let length = str.length
			const u8arr = new Uint8Array(length)
			while(length--) {
				u8arr[length] = str.charCodeAt(length)
			}
			const blob = new Blob([u8arr], {
				type: 'application/pdf'
			})
			// 将blob对象转换成url链接
			const urlObject = window.URL || window.webkitURL || window
			let pdfUrl = urlObject.createObjectURL(blob)
			this.src = this.viewerUrl + '?file=' + encodeURLComponent(pdfUrl)
		},
	}
}