预览pdf白屏加载失败

Question

查看pdf白屏，加载失败？
代码：如下
报错：如下

pdf版本》1.3.20
打开后pdf进度条走了一点就卡住了，请帮我看一下，谢谢！

以下为凑字内容：后好滴哈迪合适很好的撒婚纱花洒互动方式啥的发号施令阿是都会死

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试使用PDF.js库在前端展示一个base64格式的PDF文件，但是遇到了加载失败的问题。根据错误提示，问题可能出在PDF数据本身，包含了一些无效的字符，这导致PDF.js解析器无法正确处理。

首先，我们需要检查提供的PDF base64编码是否完整且有效。可以尝试将base64编码转换回原始PDF二进制数据，然后用其他工具（例如Adobe Acrobat Reader）打开确认其是否能正常显示。如果PDF本身没有问题，我们可以进一步分析PDF.js的配置和调用方法。

以下是针对你的代码的一些建议：

1. 确保PDF base64编码的正确性。
2. 检查PDF.js库的版本，确保它与你的项目兼容。
3. 使用最新版本的PDF.js库，因为它可能已经修复了旧版本中的某些错误。
4. 更新cMapUrl到最新的地址，以确保支持各种语言的字符映射。

更新后的代码示例：

// 引入PDF.js库
import pdfjsLib from 'pdfjs-dist';

async function loadFile(pdfbase64) {
    // 解析base64并创建一个Blob对象
    const decodedPdf = atob(pdfbase64);
    const byteNumbers = new Array(decodedPdf.length);
    for (let i = 0; i < decodedPdf.length; i++) {
        byteNumbers[i] = decodedPdf.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);

    // 创建一个新的Blob对象
    const blob = new Blob([byteArray], { type: 'application/pdf' });

    // 初始化PDF.js viewer
    const url = URL.createObjectURL(blob);
    this.pdfh5 = new pdfjsLib.getDocument(url).promise.then(function(pdf) {
        return pdf.getPage(1); // 如果你想从第一页开始
    }).then(function(page) {
        const viewport = page.getViewport({ scale: 1.0 });
        const container = document.getElementById('demo');
        container.width = viewport.width;
        container.height = viewport.height;

        // 创建一个新的canvas元素
        const canvas = document.createElement('canvas');
        container.appendChild(canvas);

        // 获取canvas的2D渲染上下文
        const context = canvas.getContext('2d');

        // 设置页面缩放比例
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };

        // 渲染页面
        page.render(renderContext);
    }).catch(function(error) {
        console.error('Error loading PDF:', error);
        Toast('合同获取失败，请稍后再试');
    });
}

loadFile(yourBase64String);

这段代码使用了PDF.js的Promise API，通过异步加载PDF文档并将其渲染到HTML页面上的canvas元素上。这样可以避免一些同步加载时可能出现的问题。

如果问题仍然存在，可能是PDF数据本身存在问题，建议检查PDF的原始来源，确保数据没有被损坏或篡改。如果问题依然无法解决，可能需要更详细的错误分析或寻求专业的PDF开发人员的帮助。