pdf.js 预览pdf_预览pdf.js_pdf.js预览多页pdf - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

pdf.js预览pdf文件流（base64）

1、前言：新接手一个老项目，需要改造pdf文件的预览效果，接口直接返回的pdf文件的文件流base64字符串，前端只能拿到base64来进行预览。...pdf.js是一款非常优秀的pdf解析工具，但不支持直接预览文件流，这里需要对pdf.js稍微改造。...2、下载pdf.js 下载地址：https://mozilla.github.io/pdf.js/ 下载稳定版本，下载后解压，把他放在静态资源目录下面，我这里的项目是老项目，前后端么有分离的java项目...，放在webapp下面，我把下载以后的文件解压重新命名为pdfjs文件夹，如图 3、保存pdf文件流我这里是一个接口返回包括内容详情，图片，pdf文件等所有内容，点击一条pdf记录，跳转打开新的标签页进行预览...预览如图(pdf内容打了马赛克)：另外，更改以后的pdfjs文件夹，已经上传到csdn资源，有需要的可以下载，地址如下： https://download.csdn.net/download/xingmei_ok

15.6K2 1

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

webSettings.userAgentString = "" // 允许加载本地 html 文件/false webSettings.allowFileAccess = true } 3.如下方法加载pdf

9.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

组件分享之前端组件——基于pdf.js在线预览PDF文件

组件分享之前端组件——基于pdf.js在线预览PDF文件背景近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件...组件基本信息组件：pdf.js 开源协议：Apache-2.0 许可证使用与下载：https://mozilla.github.io/pdf.js/ 内容本次分享的组件是用于在浏览器中在线查看...下面是其开源库中的描述内容： PDF.js是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。 PDF.js 由社区驱动并受 Mozilla 支持。...1、创建一个html页面，并在其中增加如下代码 PDF.js '...'; // 通过标签加载，创建访问PDF.js导出的快捷方式。

5.1K2 0

PDF.js专题

PDF.js是什么 PDF.js is a Portable Document Format(PDF) viewer that is built with HTML5.PDF.js is community-driven...PDF.js怎么用首先看一个demo：http://mozilla.github.io/pdf.js/web/viewer.html 这个viewer我觉得就是PDF.js的最终UI。...文件提供给PDF.js。...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速度变快?

21.1K11 2

PDF.js Electron Viewer

PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库，由 Mozilla 主导开源。...本文旨在介绍 PDF.js 于 Electron 里如何开始使用，实际尝试了用其 API 或嵌入 HTML 的几种方式。...代码: https://github.com/ikuokuo/electron-pdf-viewer.git 从零准备项目项目采用 Electron React Antd PDF.js 来实现，以下是从零准备项目的过程...PDF.js 渲染使用 API 用 API 渲染页面，可见官方 Examples[3]。 1....最后 PDF.js 可以说是 Web 渲染 PDF 的不二选择，很多 PDF Web Viewer 库都是基于它实现的。

12K3 0

使用PDF.JS在线查看PDF

第一步：下载源码https://github.com/mozilla/pdf.js 第二步：将源码拷贝进项目中，可以新建一个PDFShow文件夹存放代码第三步：修改viewer.js var DEFAULT_URL...= 'compressed.tracemonkey-pldi-09.pdf' 里面是PDF的路径修改为：var DEFAULT_URL = ''; 发布IIS后访问localhost:8080/PDFShow...file=09.pdf即可。...file=09.pdf','PDF','width:50%;height:50%;top:100;left:100;');">查看09.pdf ?...07-13 13:01的分割线------------------------------- 文章年久失修，使用案例可参阅官方Demo 插件官方的例子：http://mozilla.github.io/pdf.js

32.4K2 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

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

在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子商务管理系统中查看发布的公文，公文文件一般是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查看器 ?...该查看器中默认加载的是 pdf.js 的使用说明书内容。 ? 二、将 pdf.js 集成到项目网页中将解压缩的内容复制到项目中 ? 有多种方式加载加载并查看pdf文件内容。

42.9K6 1

Android 使用PDF.js浏览pdf的方法示例

Android的WebView做不到ios的WebView那样可以很方便的直接预览pdf文件。...当然也有替代的方案：我们可以使用mozilla开源的PDF.js。...方式二: 下载PDF.js放到assets目录下 ?...file=" + pdfUrl); PDF.js本身是一个比较大的库，如果全部放到本地的话apk差不多会增大5m左右。所以我们可以考虑吧PDF.js部署到服务端或者使用cdn的方式。...方式三:自定义预览界面，PDF.js使用cdn的方式导入 1.首先写一个预览的index.html <!

8.3K1 0

pdf.js显示合同签名问题

需求 pdf页面显示在ios11以下的环境，合同的签名印章或签字会显示不出解决方案（初步处理参考下文引用，这里是后续具体做法）现在通过使用pdf.js插件，参考下文，引入自己的代码我把generic...HashMap hashMap = this.getHashMap(request); String pdfId = (String) hashMap.get("pdf_id..."); modelMap.put("pdf_id", pdfId); log.info("---------------showPdf end pdf_id:{}------------...---", pdfId); return "manager/viewer"; } 把默认访问pdf地址提取到viewer.ftl DEFAULT_URL = 'view_pdf...pdf_id=${pdf_id}'; 经过上面步骤已经可以顺利访问pdf页面了，但是印章默认它是不显示的，还需要改点代码找到pdf.worker.js该文件下'Sig'这个参数所在地

9.7K2 0

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...示例参考资料 https://mozilla.github.io/pdf.js/ https://blog.csdn.net/qq_20473985/article/details/84984136

8.9K3 0

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?

14.9K2 0

PDF.js实现个性化PDF渲染（文本复制）

下面我们就细致讲述一下使用PDF.js过程中遇到的问题。...主要包括：基础功能集成使用Text-Layers渲染什么是PDF.JS PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件...通过npm install pdfjs-dist，我们引入了PDF.js。...使用Text-Layers渲染 PDF.js支持在使用Canvas渲染的PDF页面上渲染文本图层。...PDF.js是一个很棒的工具，但无奈文档写的较为精简，需要开发人员不断探索PDF.js的强大功能

10.3K5 3

浏览器在线预览offce,vue-pdf预览pdf文件

在office官方自带的链接后添加自己的文档链接，浏览器就可以自动解析预览支持 word 、ppt、excel，不支持pdf格式文件 "https://view.officeapps.live.com...src=" + http://word; 我们引入vue-pdf来在线预览pdf文件文档地址 npm install --save vue-pdf <pdf :src="pdf" :page="currentPage" @num-pages="totalPage=$event" @...page-loaded="currentPage=$event" > <span :class="currentPage =...from "vue-pdf"; export default { components: { pdf }, data() { return { pdf: "",

5.2K2 0

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

问题最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题，后来查找很多解决方案，最后决定用PDF.js的方式来实现解决方案参考https://www.jianshu.com/...，终于能修复字体异常的问题 PDF.js自带顶部工具类功能，如果想要去掉，只能通过修改viewer.css来实现，添加如下代码 div.toolbar { display: none; } #outerContainer...important; /* hide PDF viewer toolbar */ opacity: 0.5 !...}]; }); 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

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

那么，附件要用相对地址，绝对的pdf文件名称，可能给权限设计带来一点困扰，一般用/pdf?id=***来看附件，此时就必须用pdf.js这个插件来完成了。...其实就是用beego分页，不是一个pdf文件的多页，而是多个pdf文件连续看。 ? 文件夹： ? viewer.html PDF.js...locale.properties"/> <script src="/static/pdfjs/<em>pdf.js</em>...pdfAsDataUri); // DEFAULT_URL = pdfAsArray; // // 只引入了<em>pdf.js</em>

4.5K1 0

终极解决远程预览pdf问题

pdf.js一个基于Html的工具类，熟悉pdf.js的朋友们很清楚，pdf.js帮助我们做了很多事。尤其金融类网站会产生很多的报表。需要在线预览。...pdf.js绝对是我们的首选本地预览在pdf.js的官网上下载的demo中我们就可以直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。...远程加载(跨域) 通过上面我们很轻松在实际项目中实现pdf的预览。但是这样的预览存在一个问题。我们分布式项目中往往资源服务和业务服务不在同一台服务器上。这个时候我们在对文件进行预览就时跨域操作了。...pdf.js跨域了。在网上找了很多答案。有的说是在web.xml配置放置跨域的操作。测试无效。还有的说请求头修改成跨域的但是没说明白。没有实现。...是不是我们可以预览远程的了。其中的好处无疑减轻服务器压力了。

5381 0

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

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

9.3K2 1

jquery在线预览PDF文件

dir="ltr"> Online View PDF...a.media').media({width:800, height:600}); }); PDF File 查看预览： ---- http://tiantianit.net/upload/books/AlbbJavaKfsc.pdf ---- 使用...jquery.media.js就可以直接把一个连接到pdf文件的链接打开，满足了需求。...3gp * Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma * Other: bmp, html, pdf

6.4K3 1

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

= { value: "/static/pdf/build/pdf.sandbox.js", kind: OptionKind.VIEWER }; 修改build\pdf.js 中分片大小...40M的文件测试一下，效果如下：相关知识：实现过pdf.js默认一次性加载所有page，加载整个pdf - 53BK报刊网 pdf.js的一些参数： initialData TypedArray...disableStream 布尔（可选）禁用PDF文件数据的流式传输。默认情况下，PDF.js会尝试以块的形式加载PDF。默认值为“false”。...disableAutoFetch 布尔（可选）禁用PDF文件数据的预取。启用范围请求后，即使不需要显示当前页面，PDF.js也会自动继续获取更多数据。默认值为“false”。...实现过pdf.js默认一次性加载所有page，加载整个pdf disableRange设为 true 即可这样可以pdf.js可以实现pdf文件页码的自动选择（不重复加载pdf文件） pdfjs优化，

20.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭