uniapp 在h5中预览pdf hybrid方法

芒果大胖砸2026-03-21 9:32

uniapp 在H5中预览PDF的Hybrid方法技术

直接把hybrid文件放置在static文件下，hybrid文件下载地址

https://pan.baidu.com/s/1FsRAvrD2WkDHWUVwrHKE4A 提取码: 8888

页面当中使用方法接口当中返回的类型是文件流类型

javascript 复制代码

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

<script>
 export default {
	data() {
		return {
       		allUrl: '',
       		indexName: '',
       		id: ''
		}
	},
  onLoad(option) {
    this.indexName = option.indexName
    this.id = option.id
    this.getPdf() 
  },
  methods: {
      getPdf() {
				uni.request({
					url: uni.getStorageSync('requestBaseUrl') + '/search/api/DownLoadDoc?fileType='+'pdf'+'&dataid='+ this.id+'&index='+this.indexName,// 请求的接口地址以及传参
					responseType: 'arraybuffer', //这里记得设置响应数据格式，不然预览的pdf是空白
			        header: {
			            'lawToken': uni.getStorageSync('lawToken') // 此处是接口当中需要的token，按自己情况修改
			        },
					success: (response) => {
						if (!response) {
							uni.showToast({
								title: "预览失败",
								duration: 2000
							});
						}
						let pdfData = response.data; //pdfData是后端返回的文件流
						let blob = new Blob([pdfData], {
							type: 'application/pdf'
						})
						pdfData = window.URL.createObjectURL(blob) //创建预览路径  
							//路径是hybrid放置的路径！！！！
            			this.allUrl = `/static/hybrid/html/web/viewer.html?file=${encodeURIComponent(pdfData)}`
          			},
					fail: err => {
						console.log(err)
					} 
       			 });
        
			}
    	}
	}
</script>
<style lang="less" >
</style>

如果本地运行没问题，打包部署以后报mjs文件错误，需要后端配置MIME type文件，可参考这篇文档https://cloud.tencent.com/developer/article/2444748

如果是IIS部署的可以参考这个添加.mjs和.ftl配置项