vue3 H5 pdf插件 iphone查看pdf失败

项目要求在公众号H5页面查看pdf，因为是vue3，我找到了两个vue3的pdf插件，

pdfvuer 这个插件一开始一切正常可以打开pdf文件，但是测试测出ios 12.几的版本不兼容显示不出来 也不报错 我就放弃了

pdfjs-dist 这款插件 同样也是iphone 不能查看，但有报错，然后找到原因是版本不行，下载  2.2.228 即可，， 

1，yarn add pdfjs-dist@2.2.228

2，新建组件：

组件内容：

// 查看pdf组件
<template>
    <template v-for="item in pageNum" :key="item">
        <canvas :id="`pdf-canvas-${item}`" class="pdf-page" />
    </template>
</template>

<script>
import { reactive, toRefs, nextTick, watchEffect } from 'vue'
import * as pdfjs from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
import { Toast } from 'vant'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

export default {
    name: 'PdfViewer',
    props: {
        url: { type: String, default: '' } // pdf文件路径
    },
    setup (props, { emit }) {
        const state = reactive({
            pageNum: 0,
            pdfCtx: null
        })

        const resolvePdf = (url) => {
            const loadingTask = pdfjs.getDocument(url)
            loadingTask.promise.then(pdf => {
                state.pdfCtx = pdf
                state.pageNum = pdf.numPages
                nextTick(() => {
                    renderPdf()
                })
            })
        }

        const renderPdf = (num = 1) => {
            state.pdfCtx.getPage(num).then(page => {
                const canvas = document.getElementById(`pdf-canvas-${num}`)
                const ctx = canvas.getContext('2d')
                const viewport = page.getViewport({ scale: 1 })
                // 画布大小,默认值是width:300px,height:150px
                canvas.height = viewport.height
                canvas.width = viewport.width
                // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
                const clientWidth = document.body.clientWidth
                canvas.style.width = clientWidth + 'px'
                // 根据pdf每页的宽高比例设置canvas的高度
                canvas.style.height = clientWidth * (viewport.height / viewport.width) + 'px'
                page.render({
                    canvasContext: ctx,
                    viewport
                })
                if (num < state.pageNum) {
                    renderPdf(num + 1)
                } else {
                    emit('onRendered')
                    Toast.clear(); // 取消加载loading
                }
            })
        }

        watchEffect(() => {
            if (props.url) {
                // 展示加载loading
                Toast.loading({
                    message: '',
                    overlay: true,
                    forbidClick: true,
                    duration: 0,
                });

                resolvePdf(props.url)
            }
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>

     

3，页面引入：receiptUrl是 .pdf 文件地址

<template>

    <div>

       <div class="pdf_page" v-if="pageData.receiptUrl">  

          <PdfViewer :url="pageData.receiptUrl"></PdfViewer>

       </div>

    </div>

</template>


<script lang="ts" setup>

import PdfViewer from "@/components/PdfViewer.vue"

</script>

相关链接：

vue3.0使用pdfjs-dist查看pdf文件_果酱丶的博客-CSDN博客_pdfjs-dist vue

pdfjs-dist插件渲染出来pdf文件不兼容iphone6、iphone8等问题_真前端的博客-CSDN博客