viewer.js

请耐着性子看完再上手，不难的，全实战干货分享，超详细教程，所见即所得 （pc端和移动端都可以！！！亲测 超给力） 以下是我在实际项目开发中的过程分享 前端是: vue+jsp 1.首先下载pdf.js（怎么下可以去百度），实在不会就私我，我发给你 　　1.1展示一哈我下载下来的pdf.js的目录结构 　　 　　1.2接下来可以直接打开viewer.html在浏览器里看看效果，整个页面样式还是非常美观的 而且是纯js写的，真心佩服老外 　　关于页面的样式你也可以完全自己写不用他的，我实力不允许啊（哭笑！！！） 　　 　　这个打开的是它默认的xxxxxKey-pldi-09.pdf文件 看源码在viewer.js里面的5153行（这个行号可能会有些差异 ）自己去找找看,如果以后要加什么功能基本也是在viewer.js文件里 　　 好了如果你进行到这一步就可以教你怎么调用这个pdf查看器了 2.然后把pdf.js放入你的项目里面（ 就是把整个pdfJs文件夹拷贝到你的项目静态资源文件下面,可以把locale文件夹里面除了中英文的东西删了 ） 　　 　　 2.1 开始调用 方式（一） 　　 <%--方式一 直接在你要写的html页面用iframe标签嵌入插件的viewer.html页面 file 参数就是pdf文件的路径--%> 　　 <%--<iframe id="pdf" width=

1 问题 　　当使用pdfjs来实现预览功能的时候，遇到了2个问题： 　　一是带宽占用过大，会下载整个pdf文件，这对部署在公网的应用来说，成本压力很大，因为云服务带宽是很贵的。 　　二是内存占用过大，一个80M的pdf，在预览时占用内存高达600M，在一些内存较小的手机上容易发生崩溃。 　　pdfjs默认配置下，会加载所有的分片（内容），即使只预览一个页面也会加载整个文件。能不能实现按需加载呢？只加载所预览的页面？答案是可以，下面我就详细地介绍如何做。 2 测试环境 pdfjs 1.10.100 prebuild chrome 76 springboot 2.1 3 步骤 3.1 原理 　　要实现按需下载，需要用到HTTP协议的范围(Range)请求。MSN站点中有关Range的介绍如下： The Range HTTP request header indicates the part of a document that the server should return. Several parts can be requested with one Range header at once, and the server may send back these ranges in a multipart document. If the server sends back

需求： 在预览这个pdf文件时候，PC端可以直接 放地址， 在手机端直接放会变成下载，所以就要使用 pdfjs 来实现 背景： 文件地址： http://www.alioss.test.com/files/laofan.pdf 我的项目域名： http://www.test.com 官网地址： http://mozilla.github.io/pdf.js/ 下载稳定版本 目录结构如下。你要先访问 web目录里的 viewer.html 把文件放到你得项目静态文件里 那么你访问 www.test.com/web/viewer.html ， 如下图 项目中配置使用 nginx 配置反向代理，此时就代表 /alioss/ 在项目中就代替了 http://www.alioss.test.com #代理第三方文件访问 location /alioss/ { proxy_pass http://www.alioss.test.com/; } php文件接收访问的文件 ，格式为： http://www.test.com/file_view?file_url=http://www.alioss.test.com/files/laofan.pdf /** *预览 * 依然范儿特西 */ public function file_view(Request $request) { $file_url

1 问题 　　当使用pdfjs来实现预览功能的时候，遇到了2个问题： 　　一是带宽占用过大，会下载整个pdf文件，这对部署在公网的应用来说，成本压力很大，因为云服务带宽是很贵的。 　　二是内存占用过大，一个80M的pdf，在预览时占用内存高达600M，在一些内存较小的手机上容易发生崩溃。 　　pdfjs默认配置下，会加载所有的分片（内容），即使只预览一个页面也会加载整个文件。能不能实现按需加载呢？只加载所预览的页面？答案是可以，下面我就详细地介绍如何做。 2 测试环境 pdfjs 1.10.100 prebuild chrome 76 springboot 2.1 3 步骤 3.1 原理 　　要实现按需下载，需要用到HTTP协议的范围(Range)请求。MSN站点中有关Range的介绍如下： The Range HTTP request header indicates the part of a document that the server should return. Several parts can be requested with one Range header at once, and the server may send back these ranges in a multipart document. If the server sends back

背景 　　之前一直是用户点击下载word文件到本地，然后使用office或者wps打开。需求优化，要实现可以直接在线预览，无需下载到本地然后再打开。 　　随后开始上网找资料，网上资料一大堆，方案也各有不同，大概有这么几种方案： 　　1.word转html然后转pdf 　　2.Openoffice + swftools + Flexmapper + jodconverter 　　3.kkFileView 　　分析之后最后决定使用Openoffice+PDF.js方式实现 环境搭建 　　1.安装Openoffice，下载地址：http://www.openoffice.org/download/index.html 　　安装完成之后，cmd进入安装目录执行命令：soffice "-accept=socket,host=localhost,port=8100;urp;StarOffice.ServiceManager" -nologo -headless -nofirststartwizard 　　 　　2.PDF.js，下载地址：http://mozilla.github.io/pdf.js/ 　　下载之后解压，目录结构如下： 　　 　　 　　 代码实现 　　编码方面，分前端后： 　　后端：java后端使用openoffice把word文档转换成pdf文件，返回流 　　前端：把PDF

在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子政务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。 目前随着浏览器技术发展的不断成熟与强大，大部分的浏览器都支持直接把PDF文件拖到浏览器中显示，最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。 一、pdf.js 简介 官网地址： http://mozilla.github.io/pdf.js/ ，下载稳定版本，目前最新稳定版为v2.2.228 1、下载至本地： 2、解压缩，里面包含2个目录 build目录包含以下内容，其中 pdf.js是核心文件 web目录包含以下内容，其中 viewer.html是pdf查看器 3、在VS中打开viewer.html，引用了查看其的样式文件viewer.css、pdf.js核心文件、查看器脚本文件viewer.js 、资源文件local.properties。 4、 直接在浏览器中打开viewer.html，能正常的显示pdf查看器，但是无法显示pdf文件。 必须将 pdfjs-2

【今日推荐】：为什么一到面试就懵逼！>>> 文章目录 一、问题来源 二、解决 三、题外话 近期在处理网盘和在线文件相关问题，面对的事比较多且杂，记录下。 问题： seafile 自身预览PDF文件，部分不显示 图片显示如下： 一、问题来源 seafile 版本：7.0.5 原因： 原文件 pdf ，字体没有嵌入，所以需要本系统的字体渲染 seafile 使用 pdf.min.js ，而把对应 map 集成了。 解决这个问题，关键点在 seafile 的 pdf.js 二、解决 用 seafile 预览“有问题的” pdf ，且在浏览器里打开开发控制台 会发现，缺少对应 map 文件，如图： 解决步骤： 创建目录 /media/js/pdf/web/cmaps/ ，将 Adobe-GB1-UCS2.bcmap ， UniGB-UCS2-H.bcmap 这两个文件放在这个目录下面 文件可以在 github 里下载：https://github.com/mozilla/pdf.js/blob/master/external/bcmaps/UniGB-UCS2-H.bcmap $ root@3e1c6f87e1aa:/opt/seafile/seafile-server-latest/seahub/media/js/pdf/web/cmaps # ls Adobe-GB1-UCS2

PDF.js是一个使用HTML5构建的可移植文档格式库。 PDF.js官网： http://mozilla.github.io/pdf.js/ 下载下来的压缩包包含两个文件夹：build和web，打开web文件夹下的viewer.html，就能看到PDF的预览效果了。 预览的PDF文件是位于viewer.html同目录下的compressed.tracemonkey-pldi-09.pdf， 而设置加载这个文件的地方是：与viewer.html同目录下的viewer.js的DEFAULT_URL属性，修改这个属性的值就能够预览不同的文件，中英文的pdf文件都能成功预览。 中文展示：修改viewer.html中的文件 <link rel="resource" type="application/l10n" href="locale/zh-CN/viewer.properties"> 需要添加MIME，否则会报404 .net core 添加方式 修改 Configure 中的 UseStaticFiles //添加MIME var provider = new FileExtensionContentTypeProvider(); provider.Mappings[".properties"] = "application/octet-stream"; app