uniapp h5公众号预览pdf文件

1. src文件夹下新建static文件夹 /src/hybrid/文件地址底下有提供
2. 解决跨域问题 viewer.js中搜索throw new Error(“file origin does not match viewer’s”)

// 注释该代码块，解决跨域问题
      // if (fileOrigin !== viewerOrigin) {
      //   throw new Error("file origin does not match viewer's");
      // }

3. 如果文件地址是base64形式会出现不支持.at()语法问题
   全局搜索.at(，将at替换成slice即可，这里会有很多，仔细查找就行

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

<script>
import config from '@/config/index'
const {http} = config
export default {
    name: 'index',
    data(){
        return {
            viewerUrl: '/static/hybrid/html/web/viewer.html',
            url: '',
        }
    },
    onLoad(options){
        let httpUrl = ''
        //#ifdef H5
        httpUrl = window.location.origin
        //#endif

        //#ifndef H5
        httpUrl = 'https://xxx.com'
        //#endif
        if(!!options.title){
            uni.setNavigationBarTitle({
                title: options.title
            });
        }

        let url = options.url

        if(options.type === 'base64'){
            const base64Str = url;
            let result = base64Str.replace(/[\r\n]/g, "");
            let pdfBase64 = `data:application/pdf;base64,${result}`;
            let pdf = URL.createObjectURL(this.base64ToBlob(pdfBase64));
            this.url = `${httpUrl}${this.viewerUrl}?file=${encodeURIComponent(pdf)}`;
        }else{
            this.url = `${httpUrl}${this.viewerUrl}?file=${encodeURIComponent(url)}`
        }
    },  
    methods: {
        base64ToBlob(base64Data) {
            let arr = base64Data.split(','),
            fileType = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            l = bstr.length,
            u8Arr = new Uint8Array(l);
            while (l--) {
                u8Arr[l] = bstr.charCodeAt(l);
            }
            return new Blob([u8Arr], {
                type: fileType
            });
        }
    }
}
</script>

<style>

</style>

提供已经修改过的文件 支持预览url和base64 支持h5 小程序端

文件地址

上线后反馈了一个问题ios xr存在个例并不能预览的问题 并不是整个机型有问题
将版本降低后能解决问题

2.8.335版本