开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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>

调试步骤

检查控制台日志：查看浏览器控制台是否有字体相关的错误信息。
验证字体文件：确保 PDF 文件中使用的字体文件存在且可访问。
更新 PDF.js：确保使用的是最新版本的 PDF.js，因为新版本可能修复了旧版本的 bug。

通过以上方法，可以有效解决 PDF.js 渲染 PDF 文件时的乱码问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

PDF.js专题

PDF.js怎么用首先看一个demo：http://mozilla.github.io/pdf.js/web/viewer.html 这个viewer我觉得就是PDF.js的最终UI。...PDF.js文件太大，可以提供缩小版的js文件吗files?...PDF.js将尝试恢复可用的PDF数据（页，内容或字体），并显示文档。 What types of PDF files are slow in PDF.js?...Can I optimize a PDFfile to make PDF.js faster?什么样的pdf文件会导致PDF.js运行速度减慢，是否可以优化pdf文件使PDF.js速度变快?...这属于js中文乱码问题，你看中文文件名完全没有识别出来，看一下你的viewer.html文件在标记是不是有这句：换成：<meta http-equiv

21.1K11 2

PDF.js Electron Viewer

PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库，由 Mozilla 主导开源。...本文旨在介绍 PDF.js 于 Electron 里如何开始使用，实际尝试了用其 API 或嵌入 HTML 的几种方式。...PDF.js 渲染使用 API 用 API 渲染页面，可见官方 Examples[3]。 1....效果如下：使用 Viewer HTML PDF.js 提供了在线演示的 viewer.html，不过 pdfjs-dist 里没有，要自己编译其源码。...最后 PDF.js 可以说是 Web 渲染 PDF 的不二选择，很多 PDF Web Viewer 库都是基于它实现的。

12K3 0

pdf.js显示合同签名问题

需求 pdf页面显示在ios11以下的环境，合同的签名印章或签字会显示不出解决方案（初步处理参考下文引用，这里是后续具体做法）现在通过使用pdf.js插件，参考下文，引入自己的代码我把generic

9.8K2 0

乱码，乱码

全世界有上百种语言，日本把日文编到Shift_JIS里，韩国把韩文编到Euc-kr里，各国有各国的标准，就会不可避免地出现冲突，结果就是，在多语言混合的文本中，显示出来会有乱码。...UTF-8 新的问题又出现了：如果统一成Unicode编码，乱码问题从此消失了。

4.1K2 1

pdf.js使用方法「建议收藏」

猜想如果可以改变默认72DPI就可改变呈现的清晰度上面是最开始探索 pdf.js 使用的方法时的猜想其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定) pdf.js使用步骤一....到官网下载 pdf.js 插件并解压 (地址: PDF.js ) 1: 进入官网 2 : 选择稳定版下载 3: 下载至本地 4 : 解压 5:创建PDF.js文件夹并将刚解压的文件放入其中...二.将 PDF.js 文件夹放到项目服务器根目录下小伙伴可能会有点头晕先跟着做稍后解释 1.登录项目服务器 2.登录服务器后将 PDF.js 文件夹拷贝到项目服务器的根目录...) 能够看到 PDF.js 这个文件夹说明这一步已经完成了 3.在PDF.js 中依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html) 4.随后会显示...截图上的 pdf 文件 5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?

15.6K2 0

使用PDF.JS在线查看PDF

第一步：下载源码https://github.com/mozilla/pdf.js 第二步：将源码拷贝进项目中，可以新建一个PDFShow文件夹存放代码第三步：修改viewer.js var DEFAULT_URL...07-13 13:01的分割线------------------------------- 文章年久失修，使用案例可参阅官方Demo 插件官方的例子：http://mozilla.github.io/pdf.js

32.5K2 0

基于HTML的PDF展示 pdf.js

很不错的一个插件，推荐给大家 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。...在线演示：http://mozilla.github.com/pdf.js/web/viewer.html https://github.com/tonyqus/pdf.js

8.1K8 0

engineercms利用pdf.js制作连续看图功能

id=***来看附件，此时就必须用pdf.js这个插件来完成了。...device-width, initial-scale=1, maximum-scale=1"> PDF.js...locale.properties"/> pdf.js...pdfAsDataUri); // DEFAULT_URL = pdfAsArray; // // 只引入了pdf.js

4.5K1 0

Debian中文乱码_乱码处理

系统默认的区域我选了“zh_CN.UTF-8”，反正这样出现乱码也是我要解决的问题，就选他了。...三、安装中文字体：(中文显示乱码就是没有中文字体啊) apt-get install xfonts-intl-chinese ttf-wqy-zenhei ttf-arphic-ukai ttf-arphic-uming...这里还想说一些关于我遇到的问题吧：因为我是用vmware虚拟机装的，用终端SecureCRT连接的，再我理解并“觉得”解决了问题的时候，用终端重启linux后，还是乱码一堆啊，想着不对，果然打开vmware

9.5K2 0

pdf.js禁用打开打印下载功能

下载包https://mozilla.github.io/pdf.js/getting_started/#download 方法一：viewer.html 中找到这个button 然后想隐藏的代码上加上

9.3K2 1

SpringMVC中文乱码 controller乱码

从前台jsp的表单提交后 , 传到后台的controller中, 获得的中文是乱码首先判断jsp的页面编码是否utf-8 <%@ page language="java" contentType=

5.7K2 0

【IntelliJ IDEA】中文乱码问题 ( 代码乱码 | 编译乱码 | 控制台乱码 )

乱码类型说明 II . 解决代码乱码问题 III . 编译时乱码解决 IV . 控制台乱码解决 I ....乱码类型说明 ---- 使用 IntelliJ IDEA 开发 Java 程序时 , 会遇到以下中文乱码问题 : 1. 代码乱码 : 遇到代码中文乱码 ; 2....编译乱码 : 程序编译时报 GBK 错误 ; 3. 控制台乱码 : 编译通过后 , 控制台运行时出现中文乱码 ; II ....解决代码乱码问题 ---- 菜单栏 -> File -> Settings -> Editor -> File Encodings , 将所有编码设置成 UTF-8 ; III ....控制台乱码解决 ---- 打开 IntelliJ IDEA 安装目录 , 在 bin 目录下找到 idea64.exe.vmoptions 文件 , 在文件的最后一行添加 -Dfile.encoding

4.2K3 0

WKWebView接入PDF.js过程记录处理总结

问题最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题，后来查找很多解决方案，最后决定用PDF.js的方式来实现解决方案参考https://www.jianshu.com/...demo能接入PDF，但部分字体在真机上还是接入异常，后来使用 gulp generic-legacy 生成generic-legacy稳定包之后，对Safari进行兼容后，终于能修复字体异常的问题 PDF.js...}]; }); demo地址：https://github.com/freesan44/PDFJSReader 参考： https://github.com/mozilla/pdf.js.../www.jianshu.com/p/fd5f248a8158 https://www.jianshu.com/p/ded81b392d4d https://github.com/mozilla/pdf.js

2.8K3 0

pdf.js分片加载、分段加载golang beego

旧版的pdf.js好像不需要设置，自动就是支持分片加载的。 1 服务端golang beego http.serverfile本身自动支持分片下载的，不用操心。...默认一次性加载所有page，加载整个pdf - 53BK报刊网 pdf.js的一些参数： initialData TypedArray 带有第一部分或全部pdf数据的类型化数组。...默认情况下，PDF.js会尝试以块的形式加载PDF。默认值为“false”。 disableAutoFetch 布尔（可选）禁用PDF文件数据的预取。...启用范围请求后，即使不需要显示当前页面，PDF.js也会自动继续获取更多数据。默认值为“false”。注意：还必须禁用流式传输，请参阅上文，以便禁用预取功能以使其正常工作。...实现过pdf.js默认一次性加载所有page，加载整个pdf disableRange设为 true 即可这样可以pdf.js可以实现pdf文件页码的自动选择（不重复加载pdf文件） pdfjs优化，

20.8K2 0

WKWebView接入PDF.js过程记录处理总结

问题最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题，后来查找很多解决方案，最后决定用PDF.js的方式来实现解决方案参考https://www.jianshu.com/p/ded81b392d4d...写了demo能接入PDF，但部分字体在真机上还是接入异常，后来使用gulp generic-legacy生成generic-legacy稳定包之后，对Safari进行兼容后，终于能修复字体异常的问题PDF.js...pdf.jshttps://www.jianshu.com/p/fd5f248a8158https://www.jianshu.com/p/ded81b392d4dhttps://github.com/mozilla/pdf.js

2.5K3 0

Android使用pdf.js预览pdf（支持显示签章签名）

使用步骤： 1.复制这三个东西到assets目录下 2.如下配置Webview fun initWebSettings() { //去掉横向滚...

9.3K1 0

CVE-2024-4367｜Mozilla PDF.js代码执行漏洞

0x00 前言 PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。 pdf.js 是社区驱动的，并由 Mozilla 支持。...0x01 漏洞描述在font_loader.js中存在代码注入漏洞，当PDF.js配置isEvalSupported选项设置为true(默认值)时会将输入传递到eval()函数，攻击者可通过诱导用户打开恶意...0x02 CVE编号 CVE-2024-4367 0x03 影响版本 Mozilla PDF.js < 4.2.67 pdfjs-dist(npm) < 4.2.67 react-pdf(npm)...< 7.7.3 8.0.0 <= react-pdf(npm) < 8.0.2 0x04 漏洞详情 https://github.com/mozilla/pdf.js/security/advisories.../GHSA-wgrm-67xf-hhpq 0x05 参考链接 https://github.com/mozilla/pdf.js/security/advisories/GHSA-wgrm-67xf-hhpq

2.1K2 0

社工钓鱼利器:CVE-2024-4367: PDF.js

data.pdf -o /tmp/data.pdf -pdfjs 'alert(3)' -foxit-exec cmd.exe -foxit-args "/c calc.exe" [+] use the PDF.JS...cmd.exe /c calc.exe set OpenAction to Catalog done [+] store to /tmp/data.pdf 漏洞集成目前支持: CVE-2024-4367: PDF.js

4701 0

使用 pdf.js 在网页中加载 pdf 文件

Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。...一、pdf.js 简介官网地址：http://mozilla.github.io/pdf.js/，下载稳定版本，目前最新稳定版为v2.2.228 ? 1、下载至本地： ?...build目录包含以下内容，其中pdf.js是核心文件 ? web目录包含以下内容，其中viewer.html是pdf查看器 ?...3、在VS中打开viewer.html，引用了查看其的样式文件viewer.css、pdf.js核心文件、查看器脚本文件viewer.js 、资源文件local.properties。 ?...该查看器中默认加载的是 pdf.js 的使用说明书内容。 ? 二、将 pdf.js 集成到项目网页中将解压缩的内容复制到项目中 ? 有多种方式加载加载并查看pdf文件内容。

43K6 1

Fluid -3- pdf.js PC,移动端查看 PDF

hexo 有各种支持pdf的查看方案，但大多不同时支持移动端和PC端，本文记录使用 pdf.js 实现各设备查看 pdf 的方法。...简介 pdf.js 是用于解析和呈现 PDF 的基于 Web 标准平台的通用解决方案，功能强大。...官方网站：https://mozilla.github.io/pdf.js/ 下载 pdf.js 官网地址：https://mozilla.github.io/pdf.js/ 新版本不支持部分浏览器，为了更好的兼容性...viewer.js 文件中的相应内容：加入主题将下载文件夹命名为 pdfjs，拷贝到 themes/fluid/source/js 中使用方法在markdown 文档中使用控件配合pdf.js...;height:100%'> src-to-pdf：为 pdf 文件的链接 style 可以根据实际需求适当调整示例参考资料 https://mozilla.github.io/pdf.js

8.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭