pdfjs预览pdf内容文字丢失问题

最新推荐文章于 2024-09-04 14:40:18 发布
最新推荐文章于 2024-09-04 14:40:18 发布
阅读量5.7k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49238278/article/details/123427389
版权
在使用PDFJS预览PDF时，出现文件中的文字无法显示的问题，原因是字体文件在打包过程中被重新编码。修复方法包括：在viewer.js中将cMapUrl改为CDN引用（但存在风险），或在Vue项目中将pdfjs包置于static目录下避免字体文件被重新编码。对于后端，可以考虑过滤打包过程或手动替换包。
摘要由CSDN通过智能技术生成

现象：文件中的文字显示不出来在这里插入图片描述

报错：在这里插入图片描述
排查原因：打包后把cmaps下的字体文件重新编码了导致的。
改正后：在这里插入图片描述

解决方案：
支持外网的：可以viewer.js里的cMapUrl修改为引用cnd的方式解决，但是通常不建议使用cdn解决，万一哪一天cdn蹦了就凉凉（版本不同cMapUrl位置也不同，不要在意细节）
在这里插入图片描述

前端：
vue项目：将pdfjs包放在静态文件static中去打包，这样不会将字体文件再次编码
在这里插入图片描述
后端：不太懂，自行过滤打包，或可打包后再手动替换该包

小兔&崽子
关注
专栏目录
jspdf添加宋体_pdfjs 引入字体失败
weixin_39628247的博客
12-22 1153
这个pdf是宋体 使用的pdfjs-dist 2.0.943ref="container"class="page-container":style="{height: `${pageHeight}px`}">import pdfJS from 'pdfjs-dist'import data from './kkk.json'const cMapUrl = '../../../node_mo...
pdfjs-dist 预览pdf内容文字不显示问题
提拉米苏
02-15 3093
pdf-dist版本 npm install。修改源代码，下次拉取代码，重新安装包，不生效。将运行指令加到package.json中。5.删除包，重新install。运行要修改组件名称进行对比。控制台报错 缺少字体包。找到pdfjs依赖路径。运行指令生成补丁文件。
解决 jspdf-dist 在预览 pdf 时 一些文字内容丢失
abcd123596的博客
03-22 2266
如何解决 jspdf-dist 在预览 pdf 时 一些中文内容丢失 可能是字体文件引入失败
记录一下使用PDFJS遇到的坑
m0_63057114的博客
07-29 3068
在引用PDFjs的过程中，遇到了一下坑，这这里记录一下。列如：1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.和禁用按钮功能等...
pdfjs-dist预览pdf文字丢失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
08-31 7297
Error during font loading: The CMap “baseUrl“ parameter must be specifie
PDF预览之PDF.js的常见问答翻译
beyond__devil的博客
12-17 2971
文档地址： https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions 常见问答： 1.可以在默认 'PDF查看器' 中，指定一个不同的PDF文件吗？ 1>可以修改 'web/viewer.js' 下的 'DEFAULT_URL' 变量 2>可以通过 'file' 参数，来指定不同的PDF文件。 htt
pdf.js-canvas出现文字显示缺失问题处理
MR_Shi_it的博客
12-19 1492
pdf.js-canvas出现文字显示缺失问题处理
pdf.js viewer预览发票时文字不显示解决方法
最新发布
qq_19875513的博客
09-04 173
原因是 web/locale/locale.properties 文件找不到,web/cmaps 文件找不到,但是文件其实是有的,解决方案。转载自：https://www.cnblogs.com/HuairongChen/p/17139968.html。有些发票的中文等相关数据,预览时不显示。在Startup.cs 中增加相应代码。
pdf.js 文字丢失问题 .cmaps
热门推荐
weixin_30240349的博客
03-13 6万+
使用pdf.js 展示pdf文件 需求：电子发票类的pdf文件，以base64流的形式请求到，在浏览器中展示pdf文件 遇到的问题： 正常展示后，部分文字无法正常显示， 正常显示如下： 文件目录： js: function convertDataURItoBinary(dataURI){ dataURI = dataURI.replace(/[\r...
ecology9-谷歌浏览器下-pdf.js在渲染时部分发票丢失文字 问题定位及解决
qq_36972185的博客
02-26 1466
ecology9 谷歌浏览器下，pdf.js在渲染时不放呢发票丢失文字问题定位及解决
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
在Vue.js应用中，开发一个能够在线预览PDF文件的插件时，常常会遇到手机浏览器不支持直接预览的问题。在这种情况下，可以利用pdf.js库来解决这个问题。pdf.js是一个由Mozilla维护的开源库，它能提供跨平台的PDF文档...
pdf字迹模糊_pdf.js 踩坑日志，使用说明， 中文不能显示， 字体模糊， 签名不能显示...
weixin_36198878的博客
01-14 2716
使用版本外链接引入该版本引入上面的链接后， 全局暴露出来PDFJS这个对象遇到的问题中文字体缺失PDFJS.cMapUrl= 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/' // include "/"PDFJS.cMapPacked= true // set cMapPacked = true to ignore Warning:...
react渲染pdf，vue渲染pdf，react pdfjs-dist不显示签章，盖章问题
xmr79的博客
05-09 1486
react渲染pdf vue渲染pdf pdfjs-dist不显示签章，盖章 E签宝生成的pdf在网页渲染
H5移动端，vue2实现pdf预览，亲测后很简单
weixin_46631078的博客
11-15 2448
H5移动端，vue2实现pdf预览，亲测后很简单
【PDF.js】发票PDF不显示文本的问题
厂长的博客
02-02 1466
警告：字体加载过程中发生错误：必须指定CMap的“baseUrl”参数，请确保提供了“cMapUrl”和“cMapPacked”API参数。原因是有pdf不支持的字体格式。
在ie浏览器下解决pdfjs插件思源宋体字体部分无法识别问题
qq_37263478的博客
09-14 885
换版本吧。。。
pdf.js 入门使用指南3-字体显示问题
只看远方的博客
01-17 1万+
1：乱码问题。最近遇到一个问题，一个pdf 文件使用了冷门的字体，导致出现乱码，字体空白，如下图所示 2：问题排查，初步排查，治标。    修改改pdf 文件，把字体都修改成宋体。再次预览，显示正常 。     3：从问题上根治这个问题，治本       总不能把每个pdf 都修改一下字体，这样太麻烦。经过测试，找到治本的方法。       下载 　http://downloa
pdfjs预览pdf
09-01
PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库，用于在 Web 上预览 PDF 文档。你可以使用以下步骤来预览 PDF 文档： 1. 首先，下载并引入 PDF.js 库。你可以在官方网站（https://mozilla.github.io/pdf.js/）上找到最新版本的库文件，并将其添加到你的项目中。 2. 在 HTML 页面中创建一个容器元素，用于显示 PDF 文档的预览。例如，你可以使用一个 `<div>` 元素，并为其指定一个唯一的 ID。 3. 使用 JavaScript 代码初始化 PDF.js 并加载 PDF 文档。以下是一个简单示例： ```javascript // 获取容器元素 const container = document.getElementById('pdf-container'); // 初始化 PDF.js pdfjsLib.getDocument('path/to/your/pdf.pdf').promise .then(pdf => { // 加载第一页 return pdf.getPage(1); }) .then(page => { // 创建一个用于显示页面内容的 canvas 元素 const canvas = document.createElement('canvas'); // 设置 canvas 尺寸与页面尺寸匹配 const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width; canvas.height = viewport.height; // 将 canvas 添加到容器中 container.appendChild(canvas); // 渲染页面内容到 canvas 上 const renderContext = { canvasContext: canvas.getContext('2d'), viewport: viewport }; return page.render(renderContext); }) .catch(error => { console.error('Failed to load PDF:', error); }); ``` 在上述代码中，你需要将 `path/to/your/pdf.pdf` 替换为你要预览的实际 PDF 文件的路径。 这样，当你在浏览器中运行该代码时，就可以在指定的容器中看到 PDF 文档的预览了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值