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.
Related
Some PDFs have links. I want to make a Chrome extension which performs console.log("Hello") when someone clicks a link in a PDF opened on Chrome. How do I do this?
Context: I've written simple chrome extensions in the past, and have no trouble doing the above task for links on HTML pages. But on PDFs in Chrome, I haven't been able to make an extension that is responsive to any user action (including simple mousedown events) .
Note: I would prefer not to use tools like PDFJs, and would prefer something that operates on the PDF directly. However, I would still use PDFJs if that's the easiest way (though from what I've seen, it ignores PDF links?) The links I care about most are links to other parts of the PDF.
We are running TinyMCE version 5.4.1 with various options including:
paste_data_images: true
powerpaste_allow_local_image: true
When we drag & drop (or paste) in smaller images (400px X 400px) everything seems to work fine. The Base64 encoding is saved to the database and the image is rendered from all browsers, Chrome, Firefox and Safari.
However, when we paste in a larger image (1920px x 1081px) the image is only saved and rendered correctly in Chrome and Firefox. In Safari the Base64 encoding is saved with all lowercase characters. Therefore it doesn't render when attempting to view it. Has anyone else experienced this?
I have searched here as well as on the TinyMCE website but don't see anything mentioning this behavior. We will eventually attempt to move away from this Base64 implementation as it's no longer recommended but it's what we have for the time being so I'm just trying to address this issue.
When the page loads, its' elements can do so in parallel. But when the browser sees the base64 image, it blocks the page from loading until this image is rendered. Thus, inserting large images into the page as base64 is certainly not a good practice - it may slow down page loads and worsen the UX.
To fix this problem and maybe several other issues, utilizing the automatic_uploads option is highly recommended. It will upload pasted images on the server instead of converting them to base64. Here is the example of the PHP upload handler that will upload images and give their URLs back to TinyMCE.
Concerning the issue with Safari, some minimal reproducible example would be very useful.
I should also mention that PowerPaste is a premium feature that will not work with TinyMCE opensource. If you are using the paid version of TinyMCE, you can create a support ticket.
I have a webform with and want to open it on smartphone - than take pictures of some documents which need to be merged in one PDF, and on the end this file need to be uploaded to server.
My solution is to use Google Drive to upload PDF (scan) to GDrive and then somehow download this file from gdrive to server via some sort of widget (any links appreciate) installed on website.
Maybe someone have a better idea?
I know its late but my answer might help others. I also face the same challenge and implemented a custom solution based on Javascript and Since you are using web form so this solution will perfectly fits on your need.
You have to use JSPdf javascript library, JSPdf provide you pdf object in your browser and you can upload it download it and there are many other thing to play with.
First you have to initialize JSPdf object as per your requirement. I am creating PDF with page size width:500px and height 500px.
pdf = new jsPDF("l", "pt", [500,500]);
Simply when you will take picture from camera you will have each picture in form of base64, that base64 format you have to insert in JSPdf object
pdf.addImage(imgData, 'JPEG', 0, 0);
you can repeat the above code to add pictures from camera as much as you want, at the back-end these images are compiling and creating pdf document where each page have each images in sequence.
Once you are done, you can get PDF object in form of base64 object using below code that you can upload to any server.
pdf.output('datauristring')
above is only pdf part, you can find complete working example including camera part here Javascript Component to Scan Document
I'm using Apache FOP to generate a PDF through XML and XSL-FO. I have a cell in my generated PDF that I need to be able to scroll through if the content overflows it. XSL-FO has an overflow="scroll" feature, but based on my research on the topic it seems that Apache FOP does not support this option.
For example, here is a scrollable region in a PDF used by a large CAD company that I need to replicate:
Is there any way to enable this feature in Apache FOP? Is it possible to enable it in the source code (I haven't been able to find a way to do so)? Any other ways to tackle this issue?
No, it isn't possible.
From the FO perspective:
In the XSL-FO Recommendation the scroll value for the property overflow comes from the corresponding CSS2 definition, which includes this clarification:
When this value is specified and the target medium is "print", overflowing content should be printed.
As the PDF output is a print-oriented medium, I read this as a confirmation that FOP is correct in printing the overflowing content.
From the PDF perspective:
In the PDF Reference 6th edition, a search for the word "scroll" returns results referring either to the scrolling bars in the user interface or in interactive forms (text fields, list boxes, combo boxes).
There is not, or at least I could not find it, a "static text object, but with scrolling bars" feature (which is probably sensible for a print-oriented format), so FOP cannot create it in the PDF output file, not even modifying the source code.
A second look at your comment and the screenshot you included made me think it could be an example of the 3D Artwork feature of the PDF format, a feature I didn't know of before (and I still know nothing besides its name). According to the reference:
Specific views of 3D artwork can be specified, including a default view that is displayed initially and other views that can be selected. Views can have names that can be presented in a user interface.
So, I think your screenshot shows the different views associated to a 3D object; it is not a general-purpose feature that could be used to provide scrollable text.
Well, it could be possible ...
It is possible but as far as I know not with Apache FOP. Without seeing the PDF in question and guessing from the screen shot, it looks like a Flash widget inserted into the PDF. This in PDF terms is a RichMedia annotation (requires PDF version 1.7 with extensions) in which you can insert the Flash widget as well as other controlling files (like XML, other images to display, etc.) and relate them together.
AFAIK, only RenderX XEP (whom I work for) supports such RichMedia annotations inserted into PDF via XSL FO through the rx:rich-media-object extension documented here: http://www.renderx.com/reference.html#Rich Media
I believe, the only viewer that supports PDF with RichMedia annotations is Adobe Reader so it is required to view such a file. Here is a sample that includes a few interactive flash widgets, some interactive charts all within a few page PDF that was generated long ago. NOTE: I am sure some of the links in the document do not go anywhere, it was for a trade show many years ago. Remember, you would need to download this file and view in Adobe Reader and have flash player installed to see it function.
http://www.cloudformatter.com/Resources/Samples/RichMedia.pdf
You cannot use common PDF browser-based viewers like Chrome or Firefox as they do not support this type of annotation.
A screenshot of page one here shows an interactive, scrolling widget. Page 4 contains a widget similar to what you show in your example.
Page 4 scrolling widget very similar to your request:
The widget on the last page is created using a scroller SWF that takes parameters that are the images and setup/configuration files that are XML. The RenderX extension object takes these as parameters and embeds all of them in the document for the interactive flash widget so that it is totally self-contai9ned in the PDF. The XSL FO to do this is:
<rx:rich-media-object name="Sample HTML Widget" scaling="non-uniform" width="611.92pt"
height="74.99pt" content-width="scale-to-fit" src="url('rx-scroller\dockmenu.swf')"
transparency="true" activate-condition="page_visible">
<rx:flash-var name="setupXML" value="rx-dock-settings.xml"/>
<rx:flash-var name="contentXML" value="rx-dock-contents.xml"/>
<rx:rich-media-resource name="rx-dock-settings.xml"
src="url('rx-scroller\rx-dock-settings.xml')"/>
<rx:rich-media-resource name="rx-dock-contents.xml"
src="url('rx-scroller\rx-dock-contents.xml')"/>
<rx:rich-media-resource name="style.css" src="url('rx-scroller\css\style.css')"/>
<rx:rich-media-resource name="customer1.png" src="url('rx-scroller\images\customer1.png')"/>
<rx:rich-media-resource name="customer2.png" src="url('rx-scroller\images\customer2.png')"/>
<rx:rich-media-resource name="customer3.png" src="url('rx-scroller\images\customer3.png')"/>
<rx:rich-media-resource name="customer4.png" src="url('rx-scroller\images\customer4.png')"/>
<rx:rich-media-resource name="customer5.png" src="url('rx-scroller\images\customer5.png')"/>
<rx:rich-media-resource name="customer6.png" src="url('rx-scroller\images\customer6.png')"/>
</rx:rich-media-object>
And note that many things that are in the flash would work, like links and such. It is just a pure, interactive flash inserted into PDF as the container.
Indeed it looks like this is not possible to achieve through FOP.
Continuing to dig around for a few days, however, I did find a clever post-processing alternative that is also free, essentially embedding a PDF inside of another PDF using the LaTeX animate package.
A drawback to this method is that it is not possible to embed links inside of the scrollable region, which is a major issue for me. But the method does enable inserting a scrollable region inside of an existing PDF and got me very close to what I was trying to achieve.
Is there any alternative way to view PDF files on the web instead of using Acrobat Reader? I need to control the viewer to programmatically trigger the printing of the document.
The source of the PDF should come from a webservice URL / AspX
The easiest I would think is to use the Google Doc Viewer:
<iframe src="http://docs.google.com/viewer?url=**PathToMyPdfFile.pdf**&embedded=true" width="600" height="780" style="border: none;"></iframe>
You need to host your PDF files somewhere online, may be in a file in your public website ( it needs to be a public site) and put the link to the PDF file in "PathToMyPdfFile.pdf" in the iFrame above. Then set the width and height you need.
Google even generates this code for you here:
https://docs.google.com/viewer
Then simply put this iframe anywhere in the body of your page where you want to display your PDF. This also supports many other file formats too.
There are quite a few options for document views online, some open source others proprietary. Personally, I've had good experiences with Flex Paper. This will allow you to include the document view on your website, and there are some developer resources which will allow you to integrate it with the functionality you're looking for.
For demos, see here: http://flexpaper.devaldi.com/demo/
You can use FoxIT PDF viewer. It's free and programmable.