现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档.唯一的要求就是浏览器必须支持HTML5.使用方法: 1. PDF.js 可以在官网上下载:http://mozilla.github.io/pdf.js/ 2. 解压到目录pdf,再把整个目录拷贝到网站的public目录下.解压后是这样的: 3.

背景 之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大概有这么几种方案: 1.word转html然后转pdf 2.Openoffice + swftools + Flexmapper + jodconverter 3.kkFileView 分析之后最后决定使用Openoffice+PDF.js方式实现 环境搭建 1.安装Openoffice,下载地址:

现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档.唯一的要求就是浏览器必须支持HTML5.使用方法: 1. 下载https://github.com/mozilla/pdf.js/archive/gh-pages.zip 2. 解压到目录pdf,再把整个目录拷贝到网站的public目录下.解压后是

在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用,由于其主要是使用.net后端生成的报表方式,如果不考虑其在线设计处理,那么可以在在Vue&Element前端项目中使用,通过后端生成报表PDF文件,然后通过前端使用pdf.js来呈现报表最终效果即可. 1.使用FastReport生成自定义报表 我们通过定义自己FastReport报表格式,然后在后端

最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以,我需要后台传给我的是base64编码的pdf文件.我们知道,单纯靠base64解析pdf文件是解析不了的.所以需要引入另一个pdf解析文件--pdf.js 具体的使用方法大家可以看源码:https://mozilla.github.io/pdf.js/ 我试着按源码一步一步的操作的,但发现将bui

PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要的效果就行,但至少到了最后我让它的demo跑了起来. 网上很多教程要么不全,要么就是很杂很深又不靠谱,因为我不怎么想了解它是用什么框架完成的,怎么make的,我只想要在前端引入js并能展示pdf,所以很多看不下去,但是获得pdf.js之前还是需要进行一些配置,大致的配置过程如下吧. 1. 取得pdf

最近再搞PDF得展示问题,因为aspose.pdf成本太高,只能使用pdf.js这个开源强大的前端东东了. 在百度了很久后 网上大都是node,java,php的事例,有位大哥的是C#的后台代码按他写的前端不生效,最终代码更改如下 public void GetDoc(string id) { try { var model = zSWD_DocService.GetModelById(id); var path = System.Web.HttpContext.Current.Server.M

使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前端直接展示呢?那是因为当系统用户数量较高时,高并发会时服务器有很大的压力,可能会导致系统压测不能通过,前端转图片,可以将处理压力分摊至每个客户端. 本次操作为Vue.js + pdf.js 因个人需求不同,并未做打包处理,可自行单独下载文件,下载地址: - qs :https://pan.baidu

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析 官网地址:http://mozilla.github.io/pdf.js/ 下载pdf.js插件 解压后有 web 和 build 两个文件夹 如图 运行示例  将解压后的文件直接仍到项目路径下 访问 ip:port/文件夹名称/web/viewer.html  显示的是 web 文件夹下的compressed.tracemonkey-pldi-09.pdf  修改默认打开P

近期,有一个朋友做B端,服务器存了大量的金融类数据,很多都是pdf文档,他现在的做法是,先将pdf文档转换成flash,再放到浏览器上给用户浏览,但是他告诉我,这种体验太差了,而且很好资源,空间已经快不够了,向我咨询有没有可以直接读取pdf文档的,我之前也没做过,于是,我简单搜索了一下,还真是有,下面给大家整理出来,供大家参考. pdf.js是一款开源的pdf文档读取解析插件,据说在HTML5下诞生的,对于主流的浏览器基本都支持. 官网GitHub地址如下:https://github.com/

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来

纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdfmake:http://pdfmake.org 优点: 能够支持中文,具有部分自适应布局功能,需要vfs_fonts.js字体文件. 缺点:支持中文的vfs_fonts.js文件一般较大. 如果图片过大,不会自动分页. 生成vfs_fonts.js文件的方法如图,npm install pdfmak

今天,上线一个客户网站之后(使用的是广州新一代虚拟空间)发现在读取上传的pdf文件的时候读取错误,通过直接在浏览器输入文件地址的时候发现文件地址被重定向了(呵呵!),结果就是pdf文件源由本地直接变成了跨域获取.解决问题吧! 1.pdf.js获取文件的方法 You can modify the defaultUrl app option in the web/app_options.js file or you can append the ?file= query string to the

来,咱们看图说事 按钮1,2是pdf.js自带的,分别对应顺时针旋转90度,逆时针旋转90度.于是乎又要我做一个旋转180度的按钮,诺!按钮3来了. 1.别怂,干!首先顺藤摸瓜,看按钮1,2的html是怎么写的 (这是在viewe.html里面改的,别搞错,汗!!!) 2.中文语言包: 英文语言包: 3.3.1还是顺藤摸瓜,看按钮1,2的js源码是怎么写的(在viewer.js文件里面改) 3.2 3.3 3.4 3.5 好了,该加的基本都加了.可以去页面看看效果,如果旋转之后的数据流不需要保存

以下是我在实际项目开发中的过程分享   前端是:vue+jsp 1.首先下载pdf.js(怎么下可以去百度),实在不会就私我,我发给你 1.1展示一哈我下载下来的pdf.js的目录结构 1.2接下来可以直接打开viewer.html在浏览器里看看效果,整个页面样式还是非常美观的   而且是纯js写的,真心佩服老外 关于页面的样式你也可以完全自己写不用他的,我实力不允许啊(哭笑!!!) 这个打开的是它默认的xxxxxKey-pldi-09.pdf文件   看源码在viewer.js里面的5153行

PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公司的Mac OS操作系统中PDF格式都通用.Adobe公司在1993年为了文档传输创造了这个文件格式,这个格式使用PostScript页面描述语言,适用于列印图像和文字(无论是在纸.胶片或非物质的CRT都可).PDF是基于页面描述语言.它既可以像程序代码一样具有可读性,又能表示出可任意放大和缩小的矢

平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.github.io/pdf.js/getting_started/#download 解压打开,这两个文件夹是精华 你可以自己看看目录 我们的目标是:web/viewer.html 先打开看看: 噢,shit 了(PDF.js默认情况下不可以打开本地PDF文件(发布后可以打开服务器文件),也不可以跨域浏览P

最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题是由于服务器对http的get请求进行了数据的部分响应,导致pdf无法继续打开.尝试了很多方法,修改请求头等方式都不成功: 最后,通过查询pdf.js中的compatibility.js发现它里面对disableRange和disableStream进行了判断.唯独没有对IOS系统做判断,所以导致了

开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3,4天的时间,熬了两个凌晨3,4点,其中的艰辛.以及各中的曲折.压力只有自己能体会,项目上线后心里想着我要写一篇博文,一是总结一下经验,其次就是和大家分享自己这一路走来的的心得体会,欢迎吐槽!,废话不多说,来点干货! PDF在线预览实现: 8个实现在线浏览PDF文件的实用插件,笔者选择pdf.js,

最近在手机App开发Android版本时候遇到需要显示PDF文件的需求,记得之前直接使用系统浏览器或者WebView就可以显示,但是现在不可以了,只能另寻其他办法. 最终找到PDF.JS来进行实现,但在测试的时候发现有部分中文无法显示,但使用github上的示例是可以显示的,Clone到本地之后进行查看原因. 我配置的环境是在IIS环境下,使用Chrome来进行调试发现有文件未能正常载入,其中包含.properties文件和.bcmap文件.按照以往经验感觉应该是IIS不识别这些文件,于是在We