uniapp-文件流Blob实现PDF预览（web-view）

@AfeiyuO

已于 2024-03-21 10:43:12 修改

阅读量1k

点赞数 2

于 2024-03-20 22:35:21 首次发布

本文链接：https://blog.csdn.net/xfy991127/article/details/136890609

版权

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面

官网链接：https://uniapp.dcloud.net.cn/component/web-view.html

效果图：

1、定义一个内部页面

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

2、定义参数

export default {
	data(){
		return {
			pdfsrc:"",
            viewerUrl: '/static/hybridn/html/web/viewer.html',
		}
	},
}

3、请求接口

getFiledata(){
		//获取pdf文件流
		this.$httpservice.get( 'XXXX-接口' , {}).then(res => {
		    let blob = new Blob([res],{type:"application/pdf;charset=utf-8"})
		    let pdfSrc = window.URL.createObjectURL(blob)
		    this.pdfsrc = this.viewerUrl + '?file=' + encodeURIComponent(pdfSrc)
		    
		})
}

4、pdfjs包下载地址

https://mozilla.github.io/pdf.js/getting_started/

5、在static静态资源新建一个文件夹解压即可