ionic在app内部打开pdf文件

项目有一个需求,就是在ionic框架里打开pdf文件,因为用inappbrowser插件传入pdf地址的话,会先下载pdf文件,再用本地的pdf阅读器打开,很不方便,所以在stackoverflow搜了半天,没有比较好的方案,只能硬着头皮自己做了(吐槽:国内ionic好像还不是很火,基本上都是以个人开发着玩的为主,我现在遇到问题,已经直接放弃百度,直接找stackoverflow了。。。

首先,国外还是有用原生ionic直接打开pdf的,传送门。我也依照这个做了一个版本,其中有一个坑,就是我们的需求是打开远端服务器保存的pdf,传递的都是pdf文件的url地址,但是这个作者只是简单的说了一下可以传入url地址,但是具体使用的时候,根本打不开pdf,最终我在stackoverflow里找到解决方案了(感谢stackoverflow里的各路大神。。。

传送门的这个例子,首先必须要把pdf文件转化成BASE64码的形式传递过来,我就贴一下我解决坑的关键代码,其他的可以参考传送门链接的例子,

var raw = window.atob(decode);//decode就是pdf文件通过base64编码后再经过urldecode转过的一串字符
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(var i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
}
$scope.pdfUrl = URL.createObjectURL(new Blob([array], {type: 'application/pdf'}));

在controller里有如上的$scope.pdfurl,就可以用传送门里介绍的方法,打开pdf了,这里就不在赘述,自己看一下他的demo吧。

这里说一下这个方案的优缺点,优点就是这个是跨平台的解决方案,在android和ios都能以同样的方式,在app内部打开pdf进行查看,缺点就是不能用常用的两个手指缩放pdf文件,还有就是,很卡。。。。。。

最终还是放弃这个方案,用native方式实现,这样就得自己写插件了,我实现了一个简单的查看pdf的插件,还有一个是打开原生activity的插件,都放在github上了,写的都比较简单,只是给大家提供一个思路,大家可以下载下来,按照自己的业务需求自己改动,也欢迎在github上提交issue和修改代码。

Paperback: 338 pages Publisher: Packt Publishing - ebooks Account (August 3, 2015) Language: English ISBN-10: 1783552603 ISBN-13: 978-1783552603 Key Features Create hybrid mobile applications by combining the capabilities of Ionic, Cordova, and AngularJS Reduce the time to market your application using Ionic, that helps in rapid application development Detailed code examples and explanations, helping you get up and running with Ionic quickly and easily Book Description With the growth of the start-up market, the time it takes to market your app ideas is crucial. Developing apps using each platform specific format is time consuming and will put you behind in the rat race. Enter the hybrid mobile space: using knowledge of web technologies, one can transform their ideas into complete apps in no time and distribute them to a wide market of people. Apps developed using web technologies need to have a robust, testable, and scalable client side JavaScript framework. This is where a beautiful CSS framework named Ionic meets AngularJS to provide an elegant, robust, testable, and scalable framework enabling the building of hybrid mobile apps. With this book, you will learn hybrid mobile application development using Ionic. This book uses Cordova 5.0.0, Ionic CLI 1.5.0 & Ionic 1.0.0 to explain the concepts and build apps. To begin with, the book helps you understand where Ionic fits in today's world. Then you will deep dive into Ionic CSS components, Ionic-Angular directives, and services. You will also examine theming Ionic apps using the built in SCSS setup. Next, you will learn to build an Ionic client for a secure REST API, where you will implement user authentication and token-based development. Cordova and ngCordova will be explored and you will learn how you can integrate device specific features like a camera and Bluetooth with an Ionic app. You will wrap up the book by building a messaging app, which will deal with integrating REST API as well as device features. By the end of this book you will be able to develop a hybrid mobile application from start to finish. What you will learn Learn how a hybrid mobile application works Familiarize yourself with Cordova and see how it fits into hybrid mobile application development Seamlessly work with Ionic CSS components and Ionic-Angular JavaScript components like directives and services Learn how to theme Ionic apps, as well as customize components using Ionic SCSS support Develop an app that builds a client for a Secure REST API using Ionic & Angular Develop a real-time chat app using Firebase, that consumes ngCordova Learn how to generate a device specific installer for an Ionic app using Ionic CLI as well as Ionic Cloud services
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值