使用vue-pdf 过程及遇到的问题

安装 npm install vue-pdf

引用 import pdf from 'vue-pdf'

components: { pdf }

使用

//多页面展示

<pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i" class="pdf-view"></pdf>

this.pdfUrl = pdf.createLoadingTask({
                        url: newVal,
                        cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/',
                        cMapPacked: true
                    });
                    this.loadPdf(newVal)

//cMapUrl cMapPacked 这个是为了解决中文不出现的问题
                    
                    
loadPdf(pdfSrc) {
            // 使用 PDF.js 的 getNumPages 方法获取 PDF 的总页数
            pdf.createLoadingTask(pdfSrc).promise.then(pdf => {
                this.numPages = pdf.numPages;
            }).catch(error => {
                app.api.alert('文件出错')
                console.error('Error loading PDF:', error);
            });
        },
        
//.promise.then  需要promise不然会报错


//样式
.pdf-view {
    height: 70vh;
    // margin: 0 auto;
}

.pdf-view canvas {
    height: 100% !important;
}

//页面显示成功后控制台仍然有很多报错 需要设置高度


//最后一个问题
报错 页面空白
{"message": "Failed to fetch", "name": "UnknownErrorException", "details": "TypeError: Failed to fetch"}

最后确认是跨域引起的问题 
开发环境我们是配了proxy  在config.js
proxy: {
            '/文件路径/EMPBs': {
                target: ''http://192.168.0.1:8080/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/文件路径/EMPBs': '/EMPB'
                }
            }
        },
 //使用
 this.content = "EMPBs/" + item.PROTOCOLFILEPATH;
 
 //生产 测试环境查了好多都说是需要后端配置 但是因为一些原因后端还没有配置成功 不知道怎么解决
 //最后是用了客户端写的api实现的查看pdf