pdf.js 乱码

PDF.js 乱码问题通常是由于字体缺失或不兼容导致的。以下是一些基础概念、优势、类型、应用场景以及解决方法：

基础概念

PDF.js 是一个由 Mozilla 开发的 JavaScript 库，用于在网页上渲染 PDF 文件。它通过解析 PDF 文件的各个部分（如文本、图像、字体等）并将其渲染到网页上。

优势

跨平台：可以在任何支持 JavaScript 的浏览器上运行。
开源：代码开源，易于定制和扩展。
无需插件：不需要安装任何插件，直接使用 JavaScript 渲染 PDF。

类型

字体缺失：PDF 文件中使用的字体在用户的系统中不存在。
字体编码问题：PDF 文件中的字体编码与实际字体文件不匹配。
字体子集化问题：PDF 文件中的字体被子集化，导致某些字符无法显示。

应用场景

在线文档查看器
电子书阅读器
内容管理系统（CMS）中的文档展示

解决方法

确保字体可用：
- 确保 PDF 文件中使用的所有字体在用户的系统中都可用。
- 可以将所需的字体嵌入到 PDF 文件中。

使用通用字体：
- 在 PDF 文件中使用常见的通用字体（如 Arial、Times New Roman），这些字体在大多数系统中都可用。
字体子集化：
- 如果必须使用特定字体，可以考虑将字体子集化，只包含 PDF 文件中实际使用的字符。
配置 PDF.js：
- 在使用 PDF.js 时，可以通过配置来处理字体问题。例如，可以设置 disableFontFace 选项为 false，以确保字体被正确加载。

示例代码

以下是一个简单的示例，展示如何在网页中使用 PDF.js 渲染 PDF 文件，并处理字体问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>
    <canvas id="pdf-canvas"></canvas>
    <script>
        async function renderPDF(url) {
            const loadingTask = pdfjsLib.getDocument(url);
            const pdf = await loadingTask.promise;
            const page = await pdf.getPage(1);

            const viewport = page.getViewport({ scale: 1.5 });
            const canvas = document.getElementById('pdf-canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            await page.render(renderContext).promise;
        }

        renderPDF('example.pdf');
    </script>
</body>
</html>