首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 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文件内容。

42.8K61
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    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文件流base64编码先本地缓存.跳转到我们下载的pdf文件夹里面的【viewer.html】文件

    15.3K20

    PDF.js专题

    PDF.js是一个由Html5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的,基于web的解析和渲染PDF文件的平台。...2.1 demo程序的结构翻译 build/ pdf.js display layer 显示层采用核心层并且暴露了一个更容易使用的API来渲染PDF文件,并获得其他的资料出文件。...PDF.js主要是写阅读PDF文件,而不是编辑它们。正因为如此,我们还不支持添加任何注释。然而,我们也支持渲染一些注释类型以供查看。 The PDF.js files are too big....PDF.js文件太大,可以提供缩小版的js文件吗files?...Can I optimize a PDFfile to make PDF.js faster?什么样的pdf文件会导致PDF.js运行速度减慢,是否可以优化pdf文件使PDF.js速度变快?

    21K112

    组件分享之前端组件——基于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 '...2、增加如下CSS样式 #the-canvas { border: 1px solid black; direction: ltr; } 3、在js中增加如下代码进行加载需要在线展示的pdf文件

    5.1K20

    访问共享文件时,提示“引用的帐户当前已锁定,且可能无法登录”

    访问共享文件时,提示“引用的帐户当前已锁定,且可能无法登录”,说什么“可能”,明明就已经无法访问了啊,那究竟是服务器的高冷拒绝,还是客户端的厚颜无耻理应被关在门外呢?且听我娓娓道来。...“共享文件夹”,这个词汇由来已久,早在Windows NT 4.0就开始流行了,那时候个人电脑刚开始普及,进机房还保留着戴鞋套的传统美德,哪像现在这样,电脑里面都能倒出来几斤土。...言归正传,某客户新增了一台金蝶ERP服务器,操作系统为Windows Server 2019,金蝶每天都会在指定文件夹内产生一个备份文件,为安全起见,建议用户每天将这个备份文件复制一份到其他地方,以防万一...于是将此文件夹共享,并在指定的行政人员的电脑上,将服务器共享出来的文件夹映射为网络驱动器Z,每天从Z盘复制出备份文件即可。...还好,这回总算是正常访问共享文件夹了,问题解决。

    6.3K30

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

    供大家参考借鉴 pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用, 呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路...到官网下载 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.5K20

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

    开始以为文件流就是分片下载,其实不是。 旧版的pdf.js好像不需要设置,自动就是支持分片加载的。...如果需要,则修改viewer.js和pdf.js等引用文件位置 修改一下web\viewer.js disableAutoFetch: { value: true,//false,...disableStream 布尔 (可选)禁用PDF文件数据的流式传输。默认情况下,PDF.js会尝试以块的形式加载PDF。默认值为“false”。...disableAutoFetch 布尔 (可选)禁用PDF文件数据的预取。启用范围请求后,即使不需要显示当前页面,PDF.js也会自动继续获取更多数据。默认值为“false”。...实现过pdf.js默认一次性加载所有page,加载整个pdf disableRange设为 true 即可 这样可以pdf.js可以实现pdf文件页码的自动选择(不重复加载pdf文件) pdfjs优化,

    20.6K20

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

    问题 最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题,后来查找很多解决方案,最后决定用PDF.js的方式来实现 解决方案 参考https://www.jianshu.com/...demo能接入PDF,但部分字体在真机上还是接入异常,后来使用 gulp generic-legacy 生成generic-legacy稳定包之后,对Safari进行兼容后,终于能修复字体异常的问题 PDF.js...important; /* move doc up into empty bar space */ } 读取本地PDF文件的方式有两个,一个是初始化接入参数,一个是通过bytes方式动态加载读取 初始化接入参数...}]; }); 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.8K30

    终极解决远程预览pdf问题

    pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事。尤其金融类网站会产生很多的报表。需要在线预览。...pdf.js绝对是我们的首选 本地预览 在pdf.js的官网上下载的demo中我们就可以直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。...为什么没找到是因为我们的文件是远程文件pdf.js跨域了。在网上找了很多答案。有的说是在web.xml配置放置跨域的操作。测试无效。还有的说请求头修改成跨域的但是没说明白。没有实现。...最终我发小在viewer.html中获取file文件参数的原因是需要通过该文件获取文件文件流从而获取数据对viewer.html记性渲染。所以我换了一下思路。...既然是获取文件流为什么一开始不直接传递文件流。基于这个想法。我开始实现获取远程地址的文件流。果然让我找到了方法。我们先通过httpclient爬虫获取远程的文件流。

    50210
    领券