I try to find solutions for display PDF in browser.
A couple of restrictions:
PDF should be downloaded to client as-is. Conversion like PDF -> HTML on server is not allowed.
Installation of additional software, like browser plugins is not allowed. But it is assumed, that user has widespread plugins, like Flash, Adobe reader ...
I know about next solutions:
Adobe Reader plugin.
PDF.js
FlexPaper (but not sure if it render pdf on on client side or convert PDF to series of Flash objects...)
What you can advice else?
== UPDATE
More possible solutions are:
Silverlight component
JavaApplet component
Related
I am developing a Master-Detail application which should show an embedded PDF in its detail view. The project is based on UI5 version 1.48, so the new PDFViewer control can be used.
In desktop mode, everything works as expected:
But on a mobile screen, PDF is not showing properly:
The data source property binding at the PDFViewer is done by OData path.
<FlexBox id="fbPDFViewer"
direction="Column"
renderType="Div"
class="sapUiSmallMargin">
<PDFViewer id="idPDFViewer"
source="{myModel>/myPDFUrl}"
title=""
busy="true"
showDownloadButton="false"
height="700px"
width="95%"
loaded="onPDFLoaded"
errorMessage="{i18n>notFoundText}"
errorPlaceholderMessage="{i18n>notFoundText}">
</PDFViewer>
</FlexBox>
Even the SAP sample for embedded usage doesn't work on mobile devices.
According to the source code (1.48), the viewer renders its PDF document directly in the app / iframe only when ..:
The source is valid
It's coming from the same domain
It has a valid URI format
UI5 thinks the user is using a desktop computer (Device.system.desktop returns true) or the displayTypeapi, available since 1.58, is set to Embedded.
UI5 detects that the user agent (browser) has a certain type of PDF plugin enabled. Currently, there are no known mobile browsers which support displaying PDF documents directly in the page.
The steps 2 and 3 explain why the PDF is not rendered on a mobile device even if the source is valid. In such cases, I guess the only option is to provide a download option instead of trying to render the PDF forcefully in the mobile app.
You can use nabi.m.PDFViewer from the the nabi.m library. It works cross device, even on iOS (where you typically don't have the adobe PDF plugin). For details see https://github.com/nzamani/ui5-nabi-m
There you will find also how to try it out on localhost. I have also added some detailed instructions for deployment of the library to NW ABAP as well as SAP CP.
You can find live demos at http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.PDFViewer and http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.InPagePDFViewer
Open the two links on your iOS device or any other device to see how it looks like.
On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link. We've made this note in Fiori Design Guidelines 1.48 and we'll add it to the SDK documentation.
(More in openui5 issue 1759 on GitHub)
Thank you for your responses and hints...
Installing an Adobe Acrobat viewer on the mobile devices was not an option here.
Source of the PDF had same domain like app itself and had a valid URI format too
Due to project timeline in meantime I decided to fall back to a solution that SAP provided with it's "Paystub" (Fiori 1.0). Therein they're using a 3rd-Party control for displaying PDF's which unfortunately has an overhead of code and implementations steps but it works (with minor issues only) perfect on desktop devices as well as on mobile devices.
So far, this is workaround solved my requirement.
Thanks.
I want to show a PDF in a Vaadin view. I create a BrowserFrame and I pass the StreamResource of the PDF:
StreamResource streamResource = new StreamResource(
getPresenter().createPdfStreamSource(), report.getName() + ".pdf");
BrowserFrame pdf = new BrowserFrame(null, streamResource);
pdf.setSizeFull();
content.addComponent(pdf);
This code creates an iframe with the following source:
http://localhost:8080/my-app/vaadinServlet/APP/connector/0/134/source/mypdf.pdf
If I point the browser to this URL, it shows the PDF properly. However in my application the PDF view doesn't show. What am I doing wrong?
I am testing this in Google Chrome.
Edit: I downloaded the plugin PDF Viewer based on PDF.js and my app works fine. Does the Chrome PDF reader plugin need special configuration?
An iframe is probably not the best option to render a PDF, especially on mobile browsers. Check the WT PDF Viewer add-on which is based on pdf.js for a more compatible solution.
I need to display uploaded scans (JPG, PNG, TIFF, PDF, etc.) in the browser's window instead downloading them to a local pc and using external apps like Acrobat Reader.
I made some research in the web on that issue but wasn't really successful.
Does anyone have hints, code snippets, how to achieve that ?
EDIT :
Since I am not looking for a solution which supports viewing scans in a typical browser like Chrome, FireFox, etc. but supports viewing scans in an XPage view within Notes I need to ask my question again.
What is the best (recommended) way to view different types of scans, uploaded as PDF, JPG, TIFF, PNG, etc., in Notes within an XPage view ?
Take a look here, XPages: Embed PDF and possibly Office files
Here is some code that I have in an app for PDF's.
I tried using Bumpbox, and pdf.js and while I could get them working, iframes seemed to work best for me with using normal Domino attachment urls in xpages
I am not sure if this solution is right or not, but it works well for an app I have that only has PDFs. It does work on mobile too, at least on iOS.
<iframe
src="#{javascript:
var url = 'https://app.nsf/';
var doc = sessionScope.docID;
var atname = #RightBack(sessionScope.aname,'Body');
var end = '/$file'+atname;
return url+doc+end}"
width="800" height="1000">
</iframe>
If you are looking at using different file types you need to use a renderer, give it the attachment URL, and then display what the renderer returns with. I haven't looked at this in a while so things might have changed. Look for a lightbox clone that can display pdf. I think Orangebox was one, bumpbox looks to not be updated but I was able to get that working for me.
This method will display everything inline. I would love to see some type of renderer like pdf.js for xpages.
I want to create html file by which i could read any PDF file by providing the source of that PDF file. How can i do this by using only html5?
For example i want read a pdf file which is available in C drive so scr="http://virdir/mypdf.pdf".
I want something like this.
You want to use the developing HTML 5 File API. Mozilla has a good explanation, and you can also refer directly to the spec.
Since PDF is a binary format, you will probably want to use FileReader.readAsBinaryString().
Parsing and rendering (e.g. to a canvas) a PDF in JavaScript is possible, but it would be very challenging.
Here is an open source pdf reader written in javascript.
https://github.com/mozilla/pdf.js
There are APIs available to play with. It comes built into Firefox browser and has good support from Mozilla community.
How I can get the number of pages in a PDF document ? The document can have images too, and text in different font size. It should work with different PDF document versions.
The answer can be in any scripting language, I will port them later to Ruby.
Using pyPdf:
from pyPdf import PdfFileReader
pdf = PdfFileReader(file("document.pdf", "rb"))
print pdf.getNumPages()
I think there must be a similar library with similar functionality for Ruby.
I can think of a band-aid solution which might just work. I am going to assume that you are developing a web application/web page which needs this information. In that case, let the adobe reader plugin for the browser load the pdf document. Then, use the plugin to attach/execute some 'Javascript for pdf' to the loaded document which will return the number of pages. The DOM for that function call can be found here:
http://www.adobe.com/devnet/acrobat/pdfs/js%5Fapi%5Freference.pdf
Further, you must also collect this information and get it back. You may also find this guide helpful:
http://www.adobe.com/devnet/acrobat/pdfs/Acro6JSGuide.pdf