pdf.js-----后端返回utf-8数据流，前端处理数据展示pdf

需求:做项目联调接口时,发现知识库展示pdf未果,经与后端人员沟通,发现以下问题: 1.接口返回的是utf-8数据流,但是前端调用的是base64解析方法: 导致功能有误: 方案一:将后端返回的utf-8数据流改为经base64解析的数据流. ========新思路:尝试缓加载,但是未能实现. 测试结果:安卓系统可以正常使用,但是ios当时存在闪退的问题,且base64若处理一个2M的文件,解析后体积将近为4M,对小文件还是用,大文件很容易造成系统运行内存不够,跳出App. 方案二:用if…

Django：前后端分离后联调给前端传数据

实现前后端分离后,有了下面几点改变: 1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器 2.前端服务器需要接收Http请求(一般使用node.js) 3.前端服务器需要进行视图解析(可以使用vue.js.angular.js) 4.前端服务器需要处理路由(也就是页面之间的跳转逻辑) 5.后端服务器只需要返回数据没有分离前都是靠django中的locals()向模板传递参数可直接调用分离后只是并没有很大变化,只是将数据格式变成了json格式例子: View:…

js后端返回一个时间戳，用原生怎么对时间进行格式化？

function fn(time) { var date = new Date(time); var len = time.toString().length; // 时间戳不足13位则在后面加零 if (len < 13) { var sub = 13 - len; sub = Math.pow(10, sub); date = new Date(time * sub); } var y = date.getFullYear() + '-'; var M = date.getMonth() +…

java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）

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

base64编码后的pdf文件前端页面展示--pdf.js的应用

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

PDF.Js的使用—javascript中前端显示pdf文件

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

pdf.js跨域加载文件

pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事.尤其金融类网站会产生很多的报表.需要在线预览.pdf.js绝对是我们的首选本地预览在pdf.js的官网上下载的demo中我们就可以直接进行预览.官网的案列在web文件夹下的view.html.这里我整理了一个pdf.js精简版的. 这里写图片描述这两个demo里面加载的是本地文件.这里没什么说的.其中demo2的效果如下. 这里写图片描述代码也很简单:这里写图片描述 pdfjs 为我们做了…

PDF.js 详情解说

pdf.js资源下载点我下载自定义默认加载的pdf资源在web/view.js中我们可以通过DEFAULT_URL设置默认加载的pdf.通过上面代码我们也可以看出来可以通过后缀名来指定加载的pdf.如: http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf. 这样我们代码获取到file字段就会自动覆盖我们默认的pdf. 加载其他服务器上的pdf(远程加载) 这个功能是…

pdf.js使用教程

pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 据说IE9以上是OK的,因为我本地是IE11,所以我只在IE11上测试过,是通过的(当然火狐,360,我也测了一下,是可以的). 因为项目开发需要,在线展示PDF,而且要兼容IE,所以就选择了pdf.js,但是网上对他的教程很少,我花了一天时间才搞定,回头看了一下,也没有想象中那么困难,所以决定写一篇博客,以便大…

利用PDF.JS插件解决了本地pdf文件在线浏览问题（根据需要隐藏下载功能，只保留打印功能）

我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习! 可以在IIS7服务器上也可以下载Tomcat来做服务器 Tomcat下载地址 http://pan.baidu.com/s/1dEEUFQD 根据百度经验安装和配置Tomcat http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html 有关pdf.js的介绍在如下网址 https://github.com/mozilla/pdf…

pdf.js安装步骤和使用

从github下载的源码不能直接使用,最好使用命令行下载安装 1.下载源码 git clone git://github.com/mozilla/pdf.js.git cd pdf.js 2.安装node.js https://nodejs.org/en/download/ 3.安装gulp sudo npm install -g gulp-cli 4.安装pdf.js的依赖库 sudo npm install 5.启动本地web服务,因为有的浏览器不允许用file://协议打开pdf文件 su…

PDFObject.js、jquerymedia.js、pdf.js的对比

由于在做手机项目中需要用到预览pdf文件的需求,一搜还真多,试用后发现兼容性不是很好,大多需要浏览器对pdf阅读的支持: 如果你只是想不依赖浏览器本身对pdf解析的情况下,在手机展示pdf文件,就需要了解各个插件的优缺点进行选择: 1.PDFObject 该插件需要用到浏览器h5解析pdf的支持,在手机webview使用兼容性不是很好,下面看官方的说明: Why use PDFObject? PDFObject 2.0 detects browser support for inline/emb…

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

在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前随着浏览器技术发展的不断成熟与强大,大部分的浏览器都支持直接把PDF文件拖到浏览器中显示,最方便的是这个操作不需要额外的插件支持.但是不同的浏览器加载显示PDF的效果不同.这时就需要专门的JS插件来处理.Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在所有主流的浏览器上显示PDF文…

Vue之展示PDF格式的文档

事实上有很多种在前端展示PDF格式文档的方法,小编也用过好多种,例如有<iframe>.<embed>和<object>这些标签,但是在Vue项目里,这些方法都不能很好的展示PDF文档,实际上Vue给大家准备了展示PDF的插件,所以小编今天给大家讲解一下这个插件的用法. 首先下载插件命令:npm install pdfjs-dist 下载完毕以后新建一个组件用来存放PDF文档引入所需要的插件: 接下来就是Vue给大家已经准备好了展示PDF文档所需要的代码,不需要大家…

在html中展示pdf

pc端插件: https://pdfobject.com/ 使用: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum…

Vue.js +pdf.js 处理响应pdf文件流数据，前端转图片预览不可下载

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

在Vue&Element前端项目中，使用FastReport + pdf.js生成并展示自定义报表

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

PDF.JS 读取文件流前端展示 C#

最近再搞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…

使用pdf.js实现前端页面预览pdf文档，解决了跨域请求

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…

前端使用pdf.js预览pdf文件

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

前端使用pdf.js预览pdf文件,超级简单

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

pdf.js的使用（2）新的需求已经出现，怎么能够停止不前（迪迦奥特曼主题曲）哈哈哈。^_^

来,咱们看图说事按钮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 好了,该加的基本都加了.可以去页面看看效果,如果旋转之后的数据流不需要保存…

js Fetch返回数据res.json()报错问题

前言一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了. 什么是Fetch? 官方: Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应.它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源. 还原现场因为业务需求简单,这里只封装了get和…

Vue.js：轻量高效的前端组件化方案（转载）

摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发…